Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/ruby-on-rails-4/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript jquery手风琴鼠标盖和垂直菜单导航上的鼠标出_Javascript_Jquery_Html - Fatal编程技术网

Javascript jquery手风琴鼠标盖和垂直菜单导航上的鼠标出

Javascript jquery手风琴鼠标盖和垂直菜单导航上的鼠标出,javascript,jquery,html,Javascript,Jquery,Html,下面是我的代码,我想当我鼠标悬停链接CMT它的div将打开,当我鼠标出它的div关闭 <div class="wrap"> <ul class="accordion1"> <li> <h2 id="first">CMT</h2> <div class="content"> cont

下面是我的代码,我想当我鼠标悬停链接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>

  • CMT 第一届会议的内容
  • 鹅肝酱 第二部分的内容
  • ASP 第三届会议的内容
  • PTT 第四章的内容
试试这个

$('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();
});
试试这个

$('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()代替:

事实上,我更喜欢.show()/.hide()方法:

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

不要做得过火,但从另一个stackoverflow问题中找到了一个非常有趣的解决方案:


最后一次更新,我保证

我有一个类似的解决方案,但使用hover()代替:

事实上,我更喜欢.show()/.hide()方法:

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

不要做得过火,但从另一个stackoverflow问题中找到了一个非常有趣的解决方案:

最后一次更新,我保证