jQuery mouseoverIntent 插件在父级悬停时显示/隐藏 div，但悬停时保持显示

发布于 2024-10-08 08:52:25 字数 872 浏览 0 评论 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>

原文

I have a button that when hovered over (mouseover) displays a div right below it. When hovered away (mouseout), the div disappears.

This all works well and nicely, but now I need to keep the div below the button showing if user hovers over that div (to interact with the content inside the div).

Right now this is not possible since the div will disappear immediately after you hover away from the button that triggers the div to display.

I'm using the hoverIntent jQuery Plugin to accomplish this.

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

安穩 2024-10-15 08:52:25

将另一个 div #wrapperDiv 放在按钮和 #displayDiv 周围，并将悬停意图附加到 #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>

Stick another div #wrapperDiv around both the button and the #displayDiv and attach hoverIntent to #wrapperDiv rather than the button:

$('#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>

回复收藏 0 原文

~没有更多了~