ASP .NET Change link color inside a repeater - on clicking

Question

I have following piece of markup and we are running it on iphone 4 so some CSS elements like Hover don't work.

<asp:Repeater ID="rpt" runat="server">
    <HeaderTemplate>
        <div class="table withshadow">
    </HeaderTemplate>
    <ItemTemplate>
         <a href='<%#Eval("HistoryTeacherURL")%>' class="tablerow list navigate">
            <div class="tablecell listitem left">
                <asp:Label ID="lblDesc" Text='<%#Eval("Name")%>' runat="server" CssClass="item" /><br />                    
            </div>                            
            <div class="tablecell listitem right">
                <touch:TutorialSheets ID="lblBal" Text='<%#Eval("Tutorial")%>' runat="server" CssClass="amount item" />
            </div>
            <div  class="tablecell listitem witharrow">                        
            </div>
         </a>
    </ItemTemplate>
    <FooterTemplate>
        </div>
    </FooterTemplate>
</asp:Repeater>

What we want is that when we click on the link, the color should change to red ! The problem is that this type of CSS works on firefox but not on iphone 4.

a:active
{    
    background-color: #31ac48;
    font-color: #ffffff;
}

It will be great too see alternative solutions for this problem (javascript, jquery etc.) so that at least one of them might work on iphone 4 :-)

score 1 · Accepted Answer · answered Mar 12 '13 at 03:42

1

You can use jQuery.

$("a").click(function() {
    if $(this).is(":active") {
        (this).css("font-color", "red");
    }
});

See fiddle: http://jsfiddle.net/bMyMd/

answered Mar 12 '13 at 03:42

tymeJV

103,943
14
161
157

We used a different approach (similar to your idea). Thanks for the jsfiddle link. – Varun Sharma Mar 30 '13 at 01:11

score 1 · Answer 2 · answered Mar 12 '13 at 04:32

Are you using all of the pseudo-classes or just the one?
If you're using at least two, make sure they're in the right order or they all break:

a:link
a:visited
a:hover
a:active

in that order. Also, If you're just using :active, add a:link, even if you're not styling it.

ASP .NET Change link color inside a repeater - on clicking

2 Answers2