1

これをどのように表現すればよいかはよくわかりませんが、基本的には、そのすぐ上の別の要素にフェードインするリストアイテムにカーソルを合わせたいと思います。リストアイテムにカーソルを合わせると要素がフェードアウトするはずですが、新しく表示された要素にカーソルを合わせると、要素は表示されたままになります。

簡単なデモンストレーションをまとめました。http：//jsfiddle.net/CLDyc/-基本的に、アイテム1にカーソルを合わせてから、マウスを[アイテム1の追加情報]に移動すると、それも表示されたままになります。

var location;

$("#dots li").hover(

    function () {
        location = $(this).attr("class");
        $("#extra-info ."+location).fadeIn("fast");
      },
    function () {
        $("#extra-info ."+location).stop(true, false).fadeOut("fast");
      }
);
4

2 に答える 2

2

要素間にギャップがあるため、mouseleaveイベントがトリガーされ、要素が非表示になります。1 つのオプションはsetTimeout関数を使用することです。

var location, timeout = 0;

$("#dots li").hover(function () {
    location = $(this).attr("class");
    $("#extra-info ." + location).fadeIn("fast");
}, function () {
    timeout = setTimeout(function () {
        $("#extra-info ." + location).stop(true, false).fadeOut("fast");
    }, 500);
});

$('#extra-info li').mouseenter(function(){
   clearTimeout(timeout);   
}).mouseleave(function(){
   $(this).fadeOut('fast');
});

http://jsfiddle.net/SB4pH/

于 2013-03-12T13:39:19.613 に答える
0

Syonの提案と同様に、これを達成する1つの方法があります。

http://jsfiddle.net/CLDyc/2/

HTML

<ul id="dots">
    <li class="item1">Item 1<div style="display:none;">Item 1 Extra Info</div></li>
</ul>

CSS

.item1 div {
    margin: 0;
    padding: 0;
    position:absolute;
    top:8px;
    left:70px;
    width: 100px;
    height: 50px;
    border: 1px solid red;    
}

ul#dots {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul#dots li {
    width: 60px;
    height: 30px;
    border: 1px solid green;
}

JS

$("#dots li").mouseover(function() {
    $(this).find('div').stop(true, false).fadeIn("fast");
}).mouseout(function(){
    $(this).find('div').stop(true, false).fadeOut("fast");
});

$(".item1 div").mouseover(function() {
    $(this).stop(true, false).show();
}).mouseout(function(){
    $(this).stop(true, false).fadeOut("fast");
});
于 2013-03-12T13:54:47.963 に答える