javascript - Jquery 下拉选项 - 悬停和背景颜色问题 - 有更好的方法吗？

Question

我正在尝试使用 CSS 和 jquery 创建一些下拉元素。这是我要实现的目标:

• 当鼠标悬停在句子中的特定单词上时背景 单词的颜色发生了变化，并且出现了一个下拉列表，其中包含一些 选项(使用相同的背景颜色)。
• 原高亮单词的背景颜色应该保持
  将鼠标悬停在下面的选项上时。
• 离开下拉菜单后，它应该返回隐藏状态，
  原词应恢复为透明的背景色。

我目前的解决方案并不完美。悬停有时会导致下拉菜单闪烁一点。我想知道是否有人可以建议一些更好的方法？

我认为我所做的确实有点乱七八糟。我不确定如何选择用户最初悬停的特定 li 元素，以便我可以更改该特定元素的 bg 颜色(无需专门为每个父 li 分配 ID)。因此，我只是在离开下拉列表时将所有 li 元素更改为透明，然后如果再次突出显示该词，则必须将所有元素更改为蓝色 bg 颜色。此外，当鼠标悬停在子元素上时，我每次都会有效地更改 bg 颜色，这似乎也不是最好的方法。

这是javascript:

     $('#nav li').hover(
    function () {

       $(this).css('background-color', '#A7B7FF'); // to set parent item to  blue
        $('ul', this).css('background-color', '#A7B7FF'); // set sub items to  blue
        //show its submenu
        $('ul', this).css('z-index', '600'); // so it overlaps other drop down below
        $('ul', this).slideDown(100);

    },
    function () {
        //hide its submenu

        $('ul', this).slideUp(100,
            function() {

               $('li').css('background-color', 'transparent'); // callback so parent item returns to transparent


            }
        );
    }
);

完整示例请看这里:http://jsfiddle.net/A4r2m/1/

非常感谢

Answer 1

我将 hoverleave 限制了 500 毫秒，所以它不会闪烁。这也意味着在用户离开该区域后菜单需要 500 毫秒才能消失，因此用户可能会不小心离开该区域一会儿然后再返回，而无需重新设置动画。

编辑:我需要向节流的 hoverOut 添加取消。

http://jsfiddle.net/A4r2m/4/