adding a style on mouse over the anchor

I have anchors  inside the repeater control. How do I add a:hover style to the anchors inside the <li class="conent"> in the attached code. I tried to add something like
.content a:hover
{
color:red;
}

but doesnt work. Please help. thanks
<asp:Repeater ID="rptAttValue" runat="server">
                            <ItemTemplate>                             
                                    <ul style="background-color:white;padding-left:15px;font-family:Arial;">
                                        <li class="liContent">
                                            <a style="font-size:12px;color:#1D3a6c;"  href="<%# DataBinder.Eval(Container.DataItem, "AttributeNavigateUrl") %>"><%# Databinder.Eval(Container.DataItem, "AttributeValue") %> </a>
                                            <a href="<%# DataBinder.Eval(Container.DataItem, "AttributeNavigateUrl") %>" style="color:Gray;clear:right;">(<%# DataBinder.Eval(Container.DataItem, "AttributeCount")%>)</a>                                              
                                        </li>
                                    </ul>                                     
                            </ItemTemplate>
                        </asp:Repeater>

Open in new window

TrialUserAsked:
Who is Participating?
 
HainKurtSr. System AnalystCommented:
use this syntax (remove style color on <a> tags)
<style>
.liContent a:hover { color:red; } 
.liContent a { color:gray; } 
a:hover { background-color:yellow; color:blue;}
</style>

<a href="#">test 1</a>

<ul style="background-color:white;padding-left:15px;font-family:Arial;">
<li class="liContent">
	<a href="#" style="font-size:12px;">test 1</a>
</li>
</ul>

Open in new window

0
 
jonahzonaCommented:
Change your CSS to

li.content a:hover
{
color:red;
}

Open in new window


That should do the trick. Let me know if you need further assistance.
0
 
Carlos VillegasFull Stack .NET DeveloperCommented:
Hi, the problem is that you are defining styles in your "a" elements, so you need to force the style defined in your css class, by using the !important keyword, so your style should be:
.liContent a:hover
{
    color: red !important;
}

Open in new window


I renamed it to "liContent" because in your example you have that name, not "content".
0
 
TrialUserAuthor Commented:
thx a ton
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.