html - 堆叠 div 上的轮廓悬停效果问题

Question

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

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

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

Answer 1

你可以使用（见这里）：

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