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

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的边框顶部也应更改为#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>

希望这有帮助。

Answer 2

这应该对你有所帮助。它不是一个美丽的解决方案，但我认为它有效。

＆＃13;

＆＃13;

.list {
    list-style-type: none;
    color: #333;
    padding: 0;
}
.list-item {
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid grey;
}
.list-item:hover{
    color: #0275d8;
    border-color: #0275d8;
}
li:hover + li {
    border-top-color: #0275d8;
}
li:last-child{
    border-bottom: 1px solid grey;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

请申请此课程。将margin bottom:-1px更改为0px

＆＃13;

＆＃13;

.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: 0px;
}
.list-item:hover {
  color: #0275d8;
  border-top: 1px solid #0275d8;
  border-bottom: 1px solid #0275d8;
  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;