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

Question

我有一些叠加的div元素。悬停时，他们中的每一个人都会进入边界。

现在，当我悬停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/

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