如果此项目有背景，则更改菜单项的字体颜色答案

【问题标题】：Changing font color of menu item if this item has background如果此项目有背景，则更改菜单项的字体颜色
【发布时间】：2012-09-30 16:20:01
【问题描述】：

我在这个域 keksik.com 上创建了一个新站点在这里您可以看到顶部的导航菜单。

问题是我需要活动菜单项的字体颜色为黑色，即使它没有悬停。当我将鼠标悬停在子项上时，应该将相同的内容应用于父菜单项。

所以，如果菜单项有背景图片，我想我需要在这里使用 javascript 将字体颜色动态更改为黑色。

我尝试将此代码添加到头部，但没有任何变化：

<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>

所以，我希望你能帮助我解决这个问题。提前谢谢你。

【问题讨论】：

我认为实际上你应该在适当的链接及其父级上放置某种活动类......如果可以的话。
问题是当我悬停任何菜单项时，白色变为黑色，但如果该项目没有悬停但仍有背景，白色保持白色，尽管我需要它保持黑色。
是什么阻止你为 :hover, :active 使用正确的 css 定义？
vittore，悬停没有问题 - 它可以正常工作。而且active没有问题，但是如果我把css中active menu Item的字体改成黑色，字体一直保持黑色，即使这个item没有背景。因此，如果项目有背景，我需要一个解决方案来动态地将字体更改为黑色。我认为可以通过 javascript。
我猜你之前没有看到我的评论，但你应该更改背景字符串，并更新到 jquery 1.7.. 1.3 很旧。

标签： javascript css menu navigation menuitem

【解决方案1】：

嗯.. 不确定我是否理解，但也许这样的方法会起作用：

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");
    }
});

【讨论】：

您的解决方案看起来不错。我在 /head 标签之前插入了这段代码。但它不起作用。请检查我是否正确插入。我将尝试解释我需要什么。当您打开 keksik.com 时，第一个菜单项有背景和白色字体，但它应该是黑色（没有悬停）。当我悬停另一个菜单项时，第一个项目的字体颜色应该是白色.当我悬停第三个菜单项然后悬停它的子项时也会发生同样的事情 - 父项的字体颜色应保持黑色，而不是切换为白色。在任何情况下，文本下都有背景 - 它应该是黑色，没有背景 - 白色。
请做两件事：1）确保你调用这个jquery文件：code.jquery.com/jquery-1.7.1.min.js 2）背景是这样的：'url（“../images1/mtbgo.gif”）repeat-x滚动左上透明' 3）我为你添加了一个更好的解决方案..请看看它是否适合你

【解决方案2】：

我不太清楚你在问什么，但你为什么不能用这个：

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

这有什么问题？

【讨论】：