Welcome to WebmasterWorld Guest from 54.160.177.33

Forum Moderators: open

Message Too Old, No Replies

mouseover issue on "a" tag

     
5:43 am on Jul 23, 2011 (gmt 0)

New User

5+ Year Member

joined:Oct 13, 2009
posts:17
votes: 0


hi,
I am having problem in setting the mouseover on navigation menu.I want to "highlight the current item"displayed on the page.But can not set the color value of the highlighted class through css.
my code is
<style>
#nav_menu ul li a
{
color:white;
font-size:16px;
font-weight:bold;
text-decoration:none;
float:left;
display:block;
padding:10px;
margin-right:40px;

}
#nav_menu ul li a:hover
{
background:#ffda0b;
color:#333;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.current_nav
{
background:#ffda0b;
color:red;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
</style>

<script>
//all the list item has a navi class applied to them
$(".navi").click(function()
{
$("#home_content").hide();
$(".inner_content").hide();
$("#content_bg").show();
var p_nav=$(this).attr("id");
$("#"+p_nav+"1").show();
$(".navi").removeClass("current_nav");

$(this).addClass("current_nav");


});
</script>
Problem is clicking on li tag is applying the current_nav class on it but without setting the color as red.
my guess is <a> tag is controlling the text color but don't know how to fix that?Please help.

Thanks
kingkol
12:39 pm on July 25, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4966
votes: 10


Your problem is specificity.

#nav_menu ul li a

has a much higher specificity than:

.current_nav

If you chance your CSS to this instead, it should work:

#nav_menu ul li a.current_nav