0

我有一组这样的菜单：

<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);
};

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

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

4

2 回答 2

2

众所周知，通过脚本静态推断as:hover非常困难（并且较旧的 IE 不支持除<a>s 以外的任何东西上的伪类），最好使用 jQueryhover()方法来强制一个真正的类并改用它：

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

然后你替换你的第二行，

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

...有了这个：

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

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

于 2013-01-31T09:45:31.093 回答
0

使用此代码，我可以帮助您：

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++;
            });
        }
于 2013-01-31T09:29:49.390 回答