Welcome to WebmasterWorld Guest from 54.197.94.141

Forum Moderators: open

Message Too Old, No Replies

mouseover issue on "a" tag

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

5+ Year Member



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 Jul 25, 2011 (gmt 0)

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



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
 

Featured Threads

Hot Threads This Week

Hot Threads This Month