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

【问题标题】：jquery hover selector - another wayjquery 悬停选择器 - 另一种方式
【发布时间】：2023-04-01 09:19:01
【问题描述】：

我有一组这样的菜单：

<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 背景会移回当前菜单项。为了防止这种情况，我在 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);
};

而 move(this) 是将 lavalamp 背景移动到悬停菜单的功能。它适用于除 IE 之外的所有浏览器。 lavalamp 背景不会移动，并且有一个名为“不支持的伪：悬停”的 javascript 错误。我在 jquery 站点中搜索过，它没有名为 :hover 的选择器。

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

【问题讨论】：

你可以试试 mouseenter/mouseleave。
.is(":hover") 完美运行：jsfiddle.net/AyAZx/5
:hover 是一个 css 伪选择器，并非所有 IE 版本都完全支持。阅读更多quirksmode.org/css/contents.html
@CaptainCarl OP 使用的是hover，它映射到这两个。这不是他们要问的。

标签： jquery hover selector lavalamp

【解决方案1】：

看到:hover 是出了名的难以通过脚本静态推断（并且较旧的IE 不支持<a>s 以外的任何东西上的伪类），最好使用jQuery hover() 方法来强制real 类并使用它来代替：

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

然后你替换你的第二行，

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

...用这个：

if(!$(this).closest('.hover').length){

...改为测试以查看使用 hover 类查找祖先的 jQuery 对象是否返回任何元素。

【讨论】：

【解决方案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++;
            });
        }

【讨论】：