Question

如果每个菜单项都悬停在上面，我有以下菜单会变为红色。

如果在加载新导航页面时鼠标悬停在同一菜单项上，我现在很难停止点击的菜单项自动悬停。

我正在努力实现以下目标：

用户鼠标悬停并点击菜单项。
如果用户鼠标停留在单击的菜单项上，则不应在新导航的页面上执行悬停效果，除非用户将鼠标移离html元素并再次重新打开它。

如何做到这一点？ - 我试过在下面的代码中简单地在悬停处理程序周围添加一个if语句，以检查是否有任何li标签被悬停，但这不起作用。因此我评论了它。

我的电脑很快就要出门了！：/

<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    //if($('li').is(':hover').length == 0)
    //{

        $('li').hover(function() {
            $(this).css('background', 'red');
        }, function() {
            $(this).css('background', 'none');
        })

    //}

})

</script>


<ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
</ul>

Answer 1

好吧，我很难理解你想要达到的目标，但看起来像是this：

(function ($) {
    //":hover" pseudo-selector can only work with single item, not with bunch of them. 
    // To determine if one of the matched items is hovered we can do this     
    $.fn.isAnyHovered = function () {
        return this.filter(function () {
            return $(this).is(":hover")
        }).length;
    };
}(jQuery));

$(document).ready(function () {
    $('li').on('mouseenter', function () {
        $(this).addClass('selected');
        //unselect the item selected on page load  
        $(this).siblings('.forced_selected')
            .trigger('mouseleave')
            .removeClass('forced_selected');
    }).on('mouseleave', function () {
        $(this).removeClass('selected');
    });


    //select the first item in list on load, if nothing else is hovered
    if(!$('li').isAnyHovered()) {
       $('li ').eq(0).trigger('mouseenter').addClass('forced_selected');
    }
});

有条件的Jquery悬停在li标签上

1 个答案: