CODEWITHSUNDEEP
javascriptcssmenunavigationmenuitem
Alex Alexeev
Alex Alexeev

Reputation: 754

Changing font color of menu item if this item has background

I create a new site on this domain keksik.com Here you can see navigation menu at the top.

The problem is that I need the font color of active menu item to be black even when it is not hovered. And the same thing should be applied to parent menu item when I hover on the child item.

So, I think I need to use javascript here to change font color to black dynamically if the menu item has background image.

I tried to add this code to head, but nothing changes:

<script type="text/javascript">

$(document).ready(function(){
    if ($(#top #nav li).css('background') == 'url(images1/mtbg.gif) no-repeat left center') {
    $(#top #nav li a).css('color', 'black');
  }  

});
</script>

So, I hope you can help me with this problem. Thank you in advance.

Upvotes: 0

Views: 701

Answers (2)

Tom Oakley
Tom Oakley

Reputation: 6403

I'm not quite sure what you're asking, but why can't you just use this:

#top #nav li.active, 
#top #nav li.active:hover {
    color: black;
}

What's wrong with that?

Upvotes: 0

Devaffair
Devaffair

Reputation: 182

hmm.. not sure I understand, but maybe something like this would work:

var strBG = "url(images1/mtbg.gif) no-repeat left center";
$("#top #nav li a").live("hover", function(){
    if ($(this).parent().css("background") == strBG)
    {
        $(this).css("color", "black");
        $(this).parent().css("color", "black");
    }
});
$("#top #nav li").live("hover", function(){
    if ($(this).css("background") == strBG)
    {
        $(this).css("color", "black");
        $(this).find("a").css("color", "black");
    }
});

Upvotes: 1

Related Questions