html - 悬停时我的边框效果无法正常工作

Question

我正在用很少的 CSS 设计一个简单的列表。在此设计中，如果用户将鼠标悬停在列表项上，它将突出显示顶部和底部边框。但是，除了最后一个悬停，只有一个边框被突出显示。

如果我删除 margin-bottom: -1px; 那么它会显示 2px 边框。

.list {
  list-style-type: none;
  color: #333;
  padding: 0;
  background-color: #fff;
}

.list-item {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid #eeeeef;
  border-bottom: 1px solid #eeeeef;
  margin-bottom: -1px;
}
.list-item:hover {
  color: #0275d8;
  border-top: 1px solid #0275d8;
  border-bottom: 1px solid #0275d8;
  
}

<ul class='list'>
  <li class='list-item'>Sample List 1</li>
  <li class='list-item'>Sample List 2</li>
  <li class='list-item'>Sample List 3</li>
</ul>

Fiddle

Answer 1

这是因为下面的.list-item 仍然有一个#eeeeef border-top。解决这个问题的一个简单方法是说下一个 .list-item 的 border-top 也应该更改为 #0275d8。

我们可以这样做:

.list {
  list-style-type: none;
  color: #333;
  padding: 0;
  background-color: #fff;
}
.list-item {
  padding: 10px 0;
  border: solid #eeeeef;
  border-width: 1px 0;
  margin-bottom: -1px;
}
.list-item:hover {
  color: #0275d8;
  border-color: #0275d8;
}

/* next .list-item */
.list-item:hover + .list-item {
  border-top-color: #0275d8;
}

<ul class='list'>
  <li class='list-item'>Sample List 1</li>
  <li class='list-item'>Sample List 2</li>
  <li class='list-item'>Sample List 3</li>
</ul>

希望这对您有所帮助。