jQuery下拉菜单悬停状态

时间:2010-12-14 15:24:19

标签: javascript jquery css hover drop-down-menu

我的问题是:

我有一个下拉菜单,我希望当我将菜单悬停在菜单上时,文本颜色会发生变化,当我将鼠标悬停在子菜单上时,悬停状态将保持不变。我使用这段代码:

$("ul li").hover(function () {

    $(this).stop().animate({ backgroundColor: "white"}, 500);

},
function () {

    $(this).stop().animate({ backgroundColor: "black"}, 400);

});

}

在菜单和子菜单中悬停时为背景颜色设置动画。

我想在悬停时更改文本的颜色(不同的菜单和子菜单,而不是相同的颜色动画)。为此我使用此代码:(子菜单示例,对于菜单示例,将选择器更改为$('ul.menu li a')

$('ul.submenu li a').hover(function () {

$(this).css({color:'#FFFFFF'});

},
function () {

$(this).css({color:'#00FF00'});

});

全部这样可以正常工作,但是当我将鼠标菜单悬停时,菜单会返回原始颜色状态(因为在菜单上悬停时会激活鼠标左键)。

我想要的是,当我悬停子菜单时,菜单中的悬停状态也会保持活动状态。

我尝试了很多东西,但都给了我一些问题,唯一有用的东西就是css,但我也需要控制文本的颜色。

有效的CSS:

ul li:hover a {
    color: #FFF;
}

(使用这个css代码我用css控制菜单颜色,当我徘徊子菜单时菜单保持活动状态,但子菜单使用jquery .hover)。

任何人都可以帮忙吗?谢谢!

HTML菜单:

<ul class="menu">

      <li><a href="#">text</a></li>

      <li><a href="#">text</a>

        <ul class="submenu">
          <li><a href="#">text</a></li>
          <li><a href="#">text</a></li>
          <li><a href="#">text</a></li>
        </ul>

      </li>

      <li><a href="#">text</a>

</ul>

1 个答案:

答案 0 :(得分:0)

如果您希望悬停设置当前颜色,直到您悬停其他一些li,请使用类。

的CSS:

ul.submenu li a { color: #0f0; }
ul.submenu li a.hovered { color: #fff; }

JS:

$('ul.submenu li a').mouseover( function() {
   if (!$(this).hasClass('hovered')) {
      $('ul.submenu li a.hovered').removeClass('hovered');
      $(this).setClass('hovered');
   }
});

我希望我能正确理解你。祝你的项目好运。

[编辑]

哦,嗯,也许你想要它,所以当你去子菜单时,你的父母李不应该失去它的颜色,尽管你躲避了。如果是这样,同样的想法是适用的,你只需要鼠标悬停代码选择菜单项鼠标悬停(因此鼠标悬停在菜单上取消设置所有其他菜单并设置此菜单),然后你还需要让它删除你的菜单的类颜色,如果你鼠标超出其子菜单的ul。我不知道你的菜单在结构方面是什么样的,所以我不能评论这个选择器的工作CSS。

哦,最后你想要一个css规则与子菜单悬停来处理子菜单的突出显示。

对不起那个漫无边际的回答...