CSS：堆叠div元素，当悬停时只有悬停的div获得边框

Question

我有一些堆叠的 div 元素。在悬停时，每个人都会获得边界。

现在当我悬停 div 时，悬停的 div 正在越过边界。

JS Fiddle

<div class="container">
    <div class="button1">
        <div class="button11">
            <div class="button12"></div>
        </div>
    </div>
</div>

我无法创建以下内容：

当 div 悬停时，只有悬停的 div 必须获得边框？

提前致谢。

Answer 1

使用绝对定位并将div放在相对定位的元素内。这是更新的小提琴......

https://jsfiddle.net/zekw31gq/4/

<强> HTML

<div id="container">
  <div id="red"></div>
  <div id="blue"></div>
  <div id="black"></div>
</div>

<强> CSS

#container {
  position: relative;
  width:300px;
  height:300px;
}
#red {
  position: absolute;
  width:300px;
  height:300px;
  background:red;
  border: 4px solid transparent;
}
#blue {
  position: absolute;
  margin:25px;
  width:250px;
  height:250px;
  background:blue;
  border: 4px solid transparent;
}
#black {
  position: absolute;
  margin:50px;
  width:200px;
  height:200px;
  background:black;
  border: 4px solid transparent;
}
#red:hover {
  border-color: darkred;
}
#blue:hover {
  border-color: darkblue;
}
#black:hover {
  border-color: white;
}