0

ホバーすると（マウスオーバー）、そのすぐ下にdivが表示されるボタンがあります。ホバリング (マウスアウト) すると、div が消えます。

これはすべてうまく機能しますが、ユーザーがその div にカーソルを合わせた場合 (div 内のコンテンツを操作するため)、ボタンの下に div を表示し続ける必要があります。

div の表示をトリガーするボタンからマウスを離すとすぐに div が消えるため、現時点ではこれは不可能です。

これを実現するためにhoverIntent jQuery Plugin を使用しています。

// This is the button that when hovered
// triggers the div below it to show
$('#hoverMeToShowHideDiv').hoverIntent(function () {

$("#displayDiv").stop().slideDown('slow');
},
function () {
    // I don't want the div to hide if user hovers over it
    $("#displayDiv").stop().slideUp('slow');
});

HTML:

<div id="hoverMeToShowHideDiv"> // some stuff </div>
<div id="displayDiv"> 
    // some other stuff that I want to 
    // keep showing if users hover over it 
</div>
4

1 に答える 1

1

#wrapperDivボタンと の両方に別の divを貼り付け、ボタンではなく#displayDivhoverIntent をアタッチします。#wrapperDiv

$('#wrapperDiv').hoverIntent(function () {
   $("#displayDiv").stop().slideDown('slow');
},
function () {
   // I don't want the div to hide if user hovers over it
   $("#displayDiv").stop().slideUp('slow');
});

HTML:

<div id="wrapperDiv">
   <div id="hoverMeToShowHideDiv"> // some stuff </div>
   <div id="displayDiv"> 
      // some other stuff that I want to 
      // keep showing if users hover over it 
   </div>
</div>
于 2010-12-19T23:22:52.507 に答える