Question

我有两个不同维度的div，一个放在另一个上面。所以有一个共同的交叉区域。两个div都有CSS：hover规则集。如果我将鼠标悬停在每个div上，则该规则适用。但是如果我在交叉区域上移动，则仅启动顶部div悬停。

当鼠标悬停在交叉区域时，我希望：hover规则为两个div启动。

上的示例代码

将鼠标悬停在div上时，边框显示为黑色。当鼠标悬停在交叉区域时，我希望两个div边框都显示出来。

下面复制粘贴相同的代码以供参考：

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;   
}

更新：使问题更加明确。我希望只有当鼠标位于下图中的绿色框内时，两个div的边框才会显示

如果鼠标位于黑色方框上方，如下图所示，则只有鼠标下方的个别div才能显示其边框。

Answer 1

将:hover添加到您的包含div（范围），而不是每个内部divs;

.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;
}
span:hover div {
    border: solid 2px black;
}

这是Jsfiddle： Double Hover

Answer 2

一个有趣的问题！很想看到一个纯粹的CSS解决方案，pointer-events:none允许你通过元素传递事件但是在没有悬停的情况下离开元素本身。

也许你需要JS，这是一个解决方案：http://e-infotainment.com/projects/interface-query/demos/behaviours/forward-mouse-events/检查事件触发的“示例”选项卡

CSS：将鼠标悬停在多个div上的显示样式

2 个答案: