0

我有一个按钮，当悬停（鼠标悬停）时，它会在其正下方显示一个 div。当悬停（鼠标悬停）时，div 消失。

这一切都很好，很好，但现在我需要将 div 保留在按钮下方，以显示用户是否将鼠标悬停在该 div 上（与 div 内的内容进行交互）。

现在这是不可能的，因为在您将鼠标悬停在触发 div 显示的按钮上之后，div 会立即消失。

我正在使用hoverIntent jQuery 插件来完成此操作。

// 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#displayDiv并将 hoverIntent 附加到#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 回答