鼠标输入/离开&鼠标悬停/移出问题

mouseenter/leave & mouseover/out problems

本文关键字：鼠标 悬停 出问题 移出 输入 离开 amp      更新时间：2023-09-26

脚本：

$( ".title").mouseenter(function() {
    var which = $(this).index();
    $('.globalnav li').find('.dropdown').hide().eq(which).show();
}).mouseleave(function() {
    var which = $(this).index();
    $('.globalnav li').find('.dropdown').hide().eq(which).hide();
});

导航：

<ul class="globalnav">
    <li>
        <div class="title"><a href="#" target="_self">Home</a></div>
        <div class="dropdown">
            <div class="navlinks">
                <div class="linkstitle">Title</div>
                <div class="navlink"><a href="#" target="_self">Link1</a></div>
                <div class="navlink"><a href="#" target="_self">Link1</a></div>
            </div>
        </div>
    </li>
...

上面的代码是我现在使用的，它在Chrome中无法正常工作*我需要按住鼠标来查看div。我使用鼠标悬停，它在IE和FF中无法正常运行。

由于编码格式本身的性质（客户端给定的代码），我也很难显示标题的关联div（在标题悬停时，显示特定的div）。现在，当鼠标悬停在一个标题上时，它显示了李的第一个"导航链接"内容。

这里有一把小提琴给你看

感谢

为什么要使用.title元素的索引，如果其他LI看起来是这样，那么which变量将始终是0，而这不是针对正确.dropdown的方法？

试试类似的东西

$( ".title").on('mouseenter mouseleave', function(e) {
    var dropdown = $(this).closest('li').find('.dropdown').toggle(e.type=='mouseenter');
    $('.dropdown').not(dropdown).hide();
});

如果你想让下拉列表在悬停时可见，可以把它放在触发mouseleave 的元素内

<li>
    <div class="title">
        <a href="#" target="_self">Home</a>
        <div class="dropdown">
            <div class="navlinks">
                <div class="linkstitle">Title</div>
                <div class="navlink"><a href="#" target="_self">Link1</a></div>
                <div class="navlink"><a href="#" target="_self">Link1</a></div>
            </div>
        </div>
    </div>
</li>

FIDDLE

相关文章：