Question

我有一个按钮，当鼠标悬停时（鼠标悬停）在它下面显示一个div。当徘徊（mouseout）时，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>

Answer 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>

jQuery hoverIntent插件在父悬停时显示/隐藏div，但在悬停时继续显示

1 个答案: