jQuery手风琴鼠标悬停和鼠标退出垂直菜单的导航

jquery accordion mouseover and mouseout on navigation of vertical menu

本文关键字：鼠标 菜单 垂直 导航 手风琴 悬停 jQuery 退出      更新时间：2023-09-26

下面是我的代码，我希望当我将鼠标悬停在链接CMT上时，它的div将打开，当我鼠标退出其div关闭时。

<div class="wrap">
        <ul class="accordion1">
            <li>
                <h2 id="first">CMT</h2>
                <div class="content">
                    contents of 1st
                </div>
            </li>
            <li>
                <h2>FOIS</h2>
                <div class="content">
                    contents of 2nd
                </div>
            </li>
            <li>
                <h2>ASP</h2>
                <div class="content">
                    contents of 3rd
                </div>
            </li>
            <li>
                <h2>PTT</h2>
                <div class="content">
                    contents of 4th
                </div>
            </li>
        </ul>
    </div>

试试这个

$('h2').on('mouseenter', function () {
    $(this).next().show();
}).on('mouseleave', function () {
    $(this).next().hide();
});

演示

如果您希望在将

鼠标悬停在该内容上时显示内容，您可以这样做

$('li').on('mouseenter', function () {
    $(this).find('.content').show();
}).on('mouseleave', function () {
    $(this).find('.content').hide();
});

演示

我有一个类似的解决方案，但改用 hover（）：

$(document).ready(function(){
    $('h2').hover(function(){
        $(this).next().css("display","block");
    },function(){
        $(this).next().css("display","none");   
    });
});

jsFiddle 演示

实际上，我更喜欢 .show（）/.hide（） 方法：

$(document).ready(function(){
    $('h2').hover(function(){
        $(this).next().show('fast');
    },function(){
        $(this).next().hide('fast');   
    });
});

js小提琴演示 2

不要过度做这个或任何事情，但从这里的另一个堆栈溢出问题中遇到了一个非常有趣的解决方案：

悬停插件解决方案

不过上次更新，我保证！

相关文章：