homepage Welcome to WebmasterWorld Guest from 54.234.147.84
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
mouseover issue on "a" tag
kingkol




msg:4342990
 5:43 am on Jul 23, 2011 (gmt 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

 

Fotiman




msg:4343546
 12:39 pm on Jul 25, 2011 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved