0

下面是我的代码,当我将鼠标悬停在 Link 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>
4

2 回答 2

3

尝试这个

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

演示

于 2013-09-30T07:52:30.700 回答
0

我有一个类似的解决方案,但使用 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');   
    });
});

jsFiddle 演示 2

不要过度这样做或任何事情,而是从这里的另一个 stackoverflow 问题中遇到一个非常有趣的解决方案:

HOVERINTENT 插件解决方案

不过最后一次更新,我保证!

于 2013-09-30T08:19:42.837 回答