概述堆叠div上的悬停效果问题

Question

我有一个div的列表，它们周围有一个像素轮廓，当在div上盘旋时，该div的轮廓会改变颜色。正如预期的那样，由于div堆叠在一起，边框堆叠并且将变为额外的像素更厚。我在顶部添加1px的边距以避免这种情况，但这会破坏悬停效果。

以下是我正在做的事情以及悬停问题的基本示例 http://jsbin.com/UcOTelUH/1/edit?html,css,output

当悬停所有边时，除了底部之外应该改变颜色，因为它是重叠的。有没有办法使用兄弟选择器或其他技巧来避免这种情况？

Answer 1

您可以使用（ see here ）：

div{
  width: 100px;
  height: 30px;
  border: 1px solid #000;
  margin-bottom:-1px;
  position:relative;
  z-index:0;
}

div:hover{
  border-color:red;
  z-index:1;
}

或者，如果您想使用outline属性而不是border，请使用：

div{
  width: 100px;
  height: 30px;
  outline: 1px solid #000;
  margin-top: 1px;
  position:relative;
  z-index:0;
}

div:hover{
  outline-color:red;
  z-index:1;
}