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

我正在尝试使用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/

非常感谢

最佳答案

我将悬停调节了500毫秒，因此它不会闪烁。这也意味着在用户离开该区域后，菜单消失需要500毫秒，因此用户可以不小心离开该区域片刻然后返回，而不必重新进行动画处理。

编辑：我需要添加取消到受限制的hoverOut。

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

关于javascript - jQuery下拉选项-悬停和背景颜色问题-有更好的方法吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7781241/