CSS：将鼠标悬停在多个div上显示样式 [英] CSS: show style on hover over multiple divs placed one over another

问题描述

我有2个不同维度的div放在另一个之上。所以有一个共同的交叉区域。 CSS：悬停规则为这两个div设置。
如果我将鼠标悬停在每个div上，则适用该规则。但是如果我移过交叉区域，只有顶部的div悬停被启动。

当鼠标悬停在十字路口区域时，我想让：hover规则为两个div启动。

请参阅示例代码

解决方案

一个有趣的问题！希望看到一个纯粹的CSS解决方案，它们是 pointer-events：none ，它允许您通过元素传递事件，但不保留悬停元素。

也许你需要JS来解决这个问题，这里有一个解决方案： http://e-infotainment.com/projects/interface-query/demos/behaviours/forward-mouse-events/ 检查示例标签触发事件的位置

I have 2 divs of different dimension placed one over the other. So there is a common intersection area. There is CSS :hover rule set for both the divs. If I hover over each div then the rule applies. But if I move over the intersection area, only the top div hover is actuated.

When the mouse hovers on the area of intersection, I want the :hover rule to actuate for both the divs.

Please see example code at jsfiddle

On hover over the divs, the border shows up in black. I want both the div borders to show up when mouse hovers over the intersection area.

The same code is copy pasted below for reference:

HTML

<div class='lower-layer'></div>
<div class='upper-layer'></div>

CSS

.upper-layer {
  width: 200px;
  height: 100px;
  background-color: red;
  position:absolute;
  left: 20px;
  top: 20px;
}

.lower-layer {
  width: 100px;
  height: 200px;
  background-color: blue;
  position:absolute; 
}

.upper-layer:hover {
  border: solid 2px black;   
}

.lower-layer:hover {
  border: solid 2px black;   
}

---

UPDATE: To make the question more explicit. I want the border of both the divs to show up only when the mouse is within the green box in the image below

If the mouse is over the black boxes like in image below then only the individual div under the mouse should show its border.

解决方案

An interesting problem! Would love to see a pure CSS solution, theres the pointer-events:none that lets you pass events through the element but leaves the element itself without the hover.

Maybe you need JS for this, here is a solution: http://e-infotainment.com/projects/interface-query/demos/behaviours/forward-mouse-events/ Check the "example" tab where the events trigger

这篇关于CSS：将鼠标悬停在多个div上显示样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！