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