如何在2个部分重叠的位置独立检测悬停s?

Posted 2023-01-27

我的情况是这样的：我有两个部分重叠的div，每个div都有悬停效果：Div 1 - 包含一个条形图，其中的条形图对悬停有影响。 Div 2 - 是一个横跨屏幕底部20％的区域，当用户将鼠标悬停在屏幕底部时（例如靠近屏幕底部），控件从底部向上滑动，以允许它们将全局属性更改为表格。

我希望浏览器能够独立地检测任何一个对象上的悬停，但是发生的事情是顶部的任何对象检测到悬停，但另一个没有。我发现了一堆几乎相关的问题，但似乎没有回答这个问题。

这是一个原型，所以只能在一个浏览器（最好是Chrome）中工作的hacky答案/答案都可以。使用CSS，jQuery或JS的解决方案也都可以。

编辑：添加了一个小提琴，我认为将说明我的问题：http://jsfiddle.net/Gkgrx/

因此，如果你徘徊在“桌子”的底部（悬停时变为绿色的大红色方块），当我击中导致桌面控制向上滑动的区域（它确实）时，桌子会丢失其悬停状态 - 我想要它还能检测到悬停。

显然我需要在这里剪切和粘贴代码：

CSS：

.controlhover 
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 150px;
    z-index: 1;



.tablecontrol 
    position:absolute;
    bottom: 0px;
    left: 200px;
    right: 200px;
    background-color: #242D2F;
    opacity: .9;
    height: 70px;
    color: #FFFFFF;


.table 
    position: absolute;
    top: 0px;
    left: 50px;
    right: 50px;
    height: 500px;
    background-color: red;


.table:hover 
    background-color: green;

html：

<div class="table">This is a table that does stuff on hover</div>
<div class="controlhover"></div>
<div class="tablecontrol">This is the sliding control element</div>

JS：

$('.tablecontrol').slideUp();
$('.controlhover').hover(function()
  $('.tablecontrol').slideDown()
, function()  
  $('.tablecontrol').slideUp();
);

谢谢

答案

考虑两个元素，其中第二个元素（绿色）相对位于第一个元素（黄色）的顶部。

<div id="yellow"></div>
<div id="green"></div>

这是问题：Problem

当您将鼠标悬停在黄色和绿色元素上时，效果很好。

但是如果你在重叠区域上方，只有绿色div检测到它，因为绿色位于黄色顶部。

解决方案是在绿色上进行鼠标移动，暂时隐藏它以便读取当前鼠标位置是否有任何元素，然后立即再次显示。如果下面有一些元素，那么只需触发该元素的mouseover。

Solution

现在，当您将鼠标悬停在重叠区域上时，会通知这两个元素。

---

编辑

现在你发布了你的小提琴，我可以看到你的问题。你不能“强迫”伪类作为hover发生在元素上。 You can check the specs here.

最简单的解决方法是添加另一个类myhover作为

.table:hover,
.table.myhover 
    background-color: green;

分别进入或退出时显示或删除它。

$('.controlhover').hover(function () 
    $('.table').addClass('myhover');
, function () 
    $('.table').removeClass('myhover');
);

http://jsfiddle.net/Gkgrx/1/

我想你明白了。当小鼠在.table:hover元素上时，自然地使用.table。当鼠标悬停在与.table.myhover重叠的元素上时，.table被“人工”使用。

很难理解你的.controlhover在哪里，所以我添加了一个蓝色边框。提示：您不需要在css中指定bottom: 0px。 0px与0em相同，0无论如何，所以只需使用bottom:0和top:0等等。

另一答案

您必须通过z-index手动设置哪个在顶部或更改您的页面结构，以便您没有两个Div与wover悬停操作重叠。

在不知道您的确切页面结构的情况下..我会修改底部控制幻灯片的位置，或确保在可见时将其定义为顶部..然后隐藏/折叠并将其移动到后面。

祝好运。