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