Question

我有一套这样的菜单：

<ul class="lavalamp">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>
        Menu 3
        <ul>
            <li>Sub Menu 1</li>
            <li>Sub Menu 2</li>
            <li>Sub Menu 3</li>
        </ul>
    </li>
    <li>Menu 4</li>
</ul>

我为此添加了一个lavalamp效果。当我将鼠标悬停在任何菜单上时，lavalamp背景会移动到悬停的菜单上，如果菜单没有悬停，它将移回当前菜单。

问题是，当我将鼠标悬停在子菜单中时，它被认为没有悬停在菜单上，因此lavalamp背景会移回当前菜单项。为了防止这种情况，我在jquery.lavalamp.js中添加了一个悬停选择器，如下所示：

$li.not(".back").hover(function() {
    if (!$('.sub-menu').is(":hover")) {
    move(this);
    }
}, function(){});

function move(el) {
    $back.each(function() {
        $(this).dequeue(); }
    ).animate({
        width: el.offsetWidth,
        left: el.offsetLeft
    }, o.speed, o.fx);
};

while move（this）是将lavalamp背景移动到悬停菜单的功能。它在除IE之外的每个浏览器中都能正常工作。 lavalamp背景不会移动，并且有一个名为“unsupported pseudo：hover”的javascript错误。我在jquery网站上搜索过，它没有一个名为：hover。

的选择器

还有其他方法可以替换上面的：悬停选择器吗？任何帮助将不胜感激。

Answer 1

看来:hover很难通过脚本静态推断（并且旧的IE不支持<a>以外的任何其他类的伪类，所以最好使用jQuery {{1强制真正的类并使用它的方法：

hover()

然后你替换你的第二行，

$li.hover(function(){
  $(this).toggleClass('hover');
});

......用这个：

if (!$('.sub-menu').is(":hover")) {

...而是测试以查看查找具有if(!$(this).closest('.hover').length){类的祖先的jQuery对象是否返回任何元素。

Answer 2

使用此代码，我帮助您：

var previousClass = '';
var arr= $("li");
$.map(arr, function(li){
 li.mouseout(function (li) {
                    eventMouseOut(li);
                });
 li.mouseover(function (li) {
                    eventMouseOver(li);
               });
});
 function eventMouseOver(_this) {
            previousClass = $(_this).attr("class");
            $(_this).removeClass().addClass("Hover");
        }
 function eventMouseOut(_this) {

            var count = 1;
           var arr= $("li");
            $.map(arr, function (li) {
                $(li).removeClass().addClass("Normal");
                count++;
            });
        }

jquery悬停选择器 - 另一种方式

2 个答案: