正文 

当前位置： 首页 > 知识 >

jQuery将div悬停在另一层下方

     2023-05-08     69

关键词：

【中文标题】jQuery将div悬停在另一层下方【英文标题】：jQuery hover div underneath another layer 【发布时间】：2011-07-09 22:45:19 【问题描述】：

是否可以忽略所有“高于”元素的 div，这些 div 已通过 jQuery 绑定到它们？例如，我有一个绑定了悬停事件的元素 A，但还有其他元素 B、C、D 位于元素 A 上方“绝对定位”。因此，当用户的鼠标移到元素 B、C 上时， D，即使 B、C 和 D 直接位于元素上方，也不再触发悬停事件。是否可以忽略元素 B C 和 D？

更新： 我实际上是在尝试创建一个以元素 B、C、D 作为区域标签的地图（元素 A）。例如，对于纽约州的地图，您将有文本元素“曼哈顿”、“新泽西”等与地图重叠。这就是为什么即使用户将鼠标悬停在标签上，我也需要触发悬停。

【问题讨论】：

这是否说明了您的问题？ jsfiddle.net/userdude/BqZ3R 请不要破坏您的帖子。通过在 Stack Exchange 网络上发布，您已授予 SE 分发该内容的不可撤销的权利（在 CC BY-SA 3.0 license 下）。根据 SE 政策，任何破坏行为都将被撤销。 【参考方案1】：

如果您可以使用 CSS3，那么您可以为绝对定位元素设置pointer-events:none，请参阅demo here。

All modern browsers 支持此属性 - 仅 IE9 及以下版本和 Opera Mini 不支持（在撰写本文时）。这也意味着对于那些可能不是您想要的元素，您不会有任何指针事件。

【讨论】：

我真的喜欢这种方法，当您说带有小文本的大按钮并且希望在单击任何部分时触发悬停和单击事件时，它非常有用的按钮。如果您将文本悬停，结果就像根本没有任何文本一样，太好了！【参考方案2】：

在我看来，你有几个选择：

按照 Ivarska 的建议进行操作，并在所有元素上创建一个空元素并将其用作触发器。 绑定到整个页面上的 mousemove 并找到它何时“在框内”（即在目标元素上方）--基本上，重新发明悬停事件。 （但这不会给您的页面增加一些相当严重的开销） 重新设计

您也可以仅绑定到目标（即 A）以及您拥有的可能与 A 重叠的任何元素，然后只需检查鼠标在另一个控件中的位置是否也假设在 A 控件中。比绑定到页面和检查的开销更少，但仍然比典型的要多。

【讨论】：

@Brad Christie - 在这种情况下没有办法使用事件冒泡吗？还是我误解了事件冒泡？ quirksmode.org/js/events_order.html @JaredFarrish：最高优先级：jsfiddle.net/taJtM（无论如何悬停） @Brad - 所以你的意思是它只触发最顶层的事件，而不下推到子元素事件？ @JaredFarrish：你can，你只需要告诉它每次元素 B 触发悬停时，它应该实际上是在说元素 A 正在悬停。 （但这只有在 B 与 A 完全重叠时才实用） @Brad - 是的，我就是这么想的。如果有重叠，那么周界检查可能是要走的路（仍然将悬停附加到周界内的所有元素）。我根本不喜欢覆盖方法。太做作了。【参考方案3】：

使用 e.relatedTarget 确定用户是否将鼠标悬停在其中一个嵌套（绝对）元素上。如果你给你的地图标签一个类，可能会更容易

例如：在地图上悬停期间显示标签，并且仅在用户离开地图时隐藏它们

    $("#map").hover(
      function(e)  
        $(this).find(".labels").fadeIn();
      ,

      function(e) 
        if( $(e.relatedTarget).hasClass("maplabel") ) 
          //The user has hovered over a label...Do nothing (or some other function)
         else 
          // User has left the map and isn't over a label
          $(this).find(".labels").fadeOut();
      
    );

【讨论】：

【参考方案4】：

我现在想到的唯一解决方案是在顶部创建一个不可见元素并为其提供悬停触发器。

【讨论】：

【参考方案5】：

您可以使 A 元素的 z-index 高于 B、C 和 D 元素的 z-index。

【讨论】：

【参考方案6】：

虽然有不同的方法来解决这个问题，但可能最简单的方法是将悬停事件添加到所有元素：

HTML

<div id="a" class="hover"></div>
<div id="b" class="hover"></div>
<div id="c" class="hover"></div>
<div id="d" class="hover"></div>
<div id="state">unhovered</div>

CSS

#a 
    width: 350px;
    height: 300px;
    border: 1px solid #000;
    background-color: #ccc;

#b 
    position: absolute;
    top: 35px;
    left: 35px;
    width: 35px;
    height: 30px;
    border: 1px solid #000;
    background-color: #cca;

#c 
    position: absolute;
    top: 85px;
    left: 85px;
    width: 35px;
    height: 30px;
    border: 1px solid #000;
    background-color: #cca;

#d 
    position: absolute;
    top: 85px;
    left: 135px;
    width: 35px;
    height: 30px;
    border: 1px solid #000;
    background-color: #cca;

jQuery

$(document).ready(function()
    $('.hover').hover(
        function()
            $('#state').text('hovered');
        ,
        function()
            $('#state').text('unhovered');
        
    );
);

此处示例：http://jsfiddle.net/userdude/H5TAG/

【讨论】：

【参考方案7】：

其他人提到的 z-index 调整有效。为您希望通过悬停识别的项目设置更高的 z-index。

【讨论】：

jquery悬停一个div并在另一个div上显示图像效果

】jquery悬停一个div并在另一个div上显示图像效果【英文标题】：jqueryhoveradivanddisplayimageonanotherdivwitheffect【发布时间】：2015-05-1612:10:05【问题描述】：好的javascript新手在这里，我需要帮助！这里的设计可以更好地解释这种情况。M... 查看详情

当另一个子div悬停时，更改子div的外观(代码片段)

...JS，这是否可行。基本上我试图创建一种效果，您将鼠标悬停在一行中的图像上，此图像亮起，有关此信息的信息显示在下方。虽然图像翻转效果很简单，但很难实现显示下面的描述。我知道我可以将其作为工具提示，但所需的... 查看详情

jquery悬停列表项并在另一个div中显示图像，列表是动态的

】jquery悬停列表项并在另一个div中显示图像，列表是动态的【英文标题】：jqueryhoveralistitemanddisplayimageinanotherdiv,listisdynamic【发布时间】：2017-11-0413:33:31【问题描述】：我有一个Wordpress测试站点，并且正在使用一个插件来列出某... 查看详情

Jquery：在div的悬停时附加一个类并在不悬停时删除

】Jquery：在div的悬停时附加一个类并在不悬停时删除【英文标题】：Jquery:AppendaClassonhoverofadivandremovewhennothover【发布时间】：2013-05-0521:02:25【问题描述】：我想在该div悬停时将一个类附加到该div，并在它不悬停时删除该类。当我... 查看详情

仅使用 CSS，将鼠标悬停在另一个元素上时显示 div

】仅使用CSS，将鼠标悬停在另一个元素上时显示div【英文标题】：UsingonlyCSS,showdivonhoveroveranotherelement【发布时间】：2011-07-0918:19:36【问题描述】：当有人将鼠标悬停在&lt;a&gt;元素上时，我想显示一个div，但我想在CSS而不是J... 查看详情

将鼠标悬停在另一个div上显示div(代码片段)

我试图将鼠标悬停在<div>上时会显示另一个<div>。我有以下代码：.showme7 display:none; .single-fun-fact:hover.showme7 display:block; <divid="hulk"class="single-fun-fact"> <pc 查看详情

在悬停时显示一个 DIV，但在另一个悬停的 DIV 内。使用 CSS

】在悬停时显示一个DIV，但在另一个悬停的DIV内。使用CSS【英文标题】：DisplayaDIVonhover,overbutwithinanotherDIVwhichishoveredover.WithCSS【发布时间】：2013-12-2804:24:27【问题描述】：我正在尝试获取它，因此当我将鼠标悬停在一个DIV上时，... 查看详情

当我将鼠标悬停在另一个 div 上时，如何使文本出现在一个 div 中？

】当我将鼠标悬停在另一个div上时，如何使文本出现在一个div中？【英文标题】：HowdoImaketextappearinadivwhenIhoveroveranother?【发布时间】：2021-02-0313:38:15【问题描述】：我已经为我的网站创建了一个主页，其中包含所有方面的概述。... 查看详情

悬停 div 以在另一个 div 中显示更多内容

】悬停div以在另一个div中显示更多内容【英文标题】：Hoverdivtoshowmorethingsinsideanotherdiv【发布时间】：2015-01-1710:59:12【问题描述】：我在一个网站上工作，正在寻找一种功能，可以让我将一个div悬停在另一个div内滚动，就像这个... 查看详情

你如何在鼠标悬停（jQuery）上交换 DIV？

】你如何在鼠标悬停（jQuery）上交换DIV？【英文标题】：HowdoyouswapDIVsonmouseover(jQuery)?【发布时间】：2010-09-0706:22:21【问题描述】：这几乎是第二个最简单的翻转效果，我仍然没有找到任何简单的解决方案。需要：我有一个项目列... 查看详情

Jquery子菜单，悬停动画问题

】Jquery子菜单，悬停动画问题【英文标题】：Jquerysubmenu,hoverin/outanimationproblem【发布时间】：2011-07-1308:18:20【问题描述】：我正在jquery中制作菜单。你可以在http://mywash.dk/testtest/index.html看到它从一开始显示的子菜单（在“Hvordan”... 查看详情

JQuery - 图像的悬停事件在另一个图像后面

】JQuery-图像的悬停事件在另一个图像后面【英文标题】：JQuery-Hovereventofanimagebehindanother【发布时间】：2012-06-0712:59:55【问题描述】：如何将鼠标悬停在另一个元素后面？（在这种情况下，我有两张图片）我进行了很多搜索，发... 查看详情

将 Div 移动到一列的右侧和另一列的下方

】将Div移动到一列的右侧和另一列的下方【英文标题】：MovingDivtotherightofacolumnandunderanothercolumn【发布时间】：2014-01-1922:44:55【问题描述】：我对HTML/CSS很陌生。我希望包含&lt;p&gt;posts&lt;/p&gt;的div（在下面标记的底部... 查看详情

当另一个 div 悬停在 jQuery 上时，div 下拉

】当另一个div悬停在jQuery上时，div下拉【英文标题】：DivdropdownwhenanotherdivishoveredoverjQuery【发布时间】：2014-08-0706:46:15【问题描述】：我有一个带有类nav-divs的div，其中嵌套了另一个带有类下拉菜单的div。我有这四个。当其中一... 查看详情

是否可以通过 CSS 将鼠标悬停在另一个元素上来更改 img src

】是否可以通过CSS将鼠标悬停在另一个元素上来更改imgsrc【英文标题】：IsitpossibletochangeimgsrcbyhoveronanotherelementbyCSS【发布时间】：2018-08-0820:36:35【问题描述】：当div元素悬停时，CSS中是否可以更改imgsrc？<aclass="template-image"href="... 查看详情

当悬停另一个 div 时，将悬停状态应用于多个 div

】当悬停另一个div时，将悬停状态应用于多个div【英文标题】：Applythehoverstatetomultipledivswhenanotherdivishoveredover【发布时间】：2012-12-0421:14:28【问题描述】：我正在寻找一种方法，当鼠标悬停在另一个div上时，将悬停状态应用于我... 查看详情

Jquery 鼠标悬停在 Div 类上

】Jquery鼠标悬停在Div类上【英文标题】：JquerymouseHoveronDivclass【发布时间】：2021-11-2817:44:26【问题描述】：我想添加鼠标悬停效果。它是一个具有相同div标签的产品部分，如果我将鼠标悬停在图像类上，我只想显示当前图像的标... 查看详情

当鼠标悬停在另一个 Div 上时为一个 Div 设置动画

】当鼠标悬停在另一个Div上时为一个Div设置动画【英文标题】：AnimateoneDivwhenthemousehoversoveranother【发布时间】：2012-01-1023:38:43【问题描述】：当鼠标悬停在页面其他地方的另一个div标签上时，我希望为一个div设置动画。举个例子... 查看详情