Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 170
  • Last Modified:

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

0
TrialUser
Asked:
TrialUser
1 Solution
 
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
 
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
 
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now