CSS：悬停在多个 div 上时显示样式

我有 2 个不同尺寸的 div，一个放在另一个上面。所以有一个共同的交叉区域。这两个 div 都有 CSS :hover 规则集。 如果我将鼠标悬停在每个 div 上，则规则适用。但是，如果我移过交叉区域，则只会激活顶部 div 悬停。

当鼠标悬停在交叉区域时，我希望 :hover 规则对两个 div 都有效。

请参阅示例代码jsfiddle http://jsfiddle.net/souvikbasu/881u0r7y/

将鼠标悬停在 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;   
}

UPDATE: 让问题更明确。我希望仅当鼠标位于下图中的绿色框中时才显示两个 div 的边框

如果鼠标位于黑框上（如下图所示），则只有鼠标下方的单个 div 应该显示其边框。

Add :hover到你的包含div (span）而不是每个内部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：双悬停 https://jsfiddle.net/881u0r7y/2/