html - 在垂直导航上覆盖 border-top

Question

我有这个垂直导航(Here is the jFiddle)

<style>
ul{
  list-style-type: none;
}

li{
  display: block;
  margin: 0;
  padding: 10;
  border-top: 1px dashed #08C;
}

li:hover{
  background-color: #08C;
}
</style>

<ul>
<li>Abc</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>

悬停的 li 应该是纯蓝色，上面没有任何虚线。因此，我希望在悬停的 li 上，周围的虚线边框是实心的。把hovered的li的border-top改成solid没问题，就是不知道下一个li元素的border-top怎么改。

我正在寻找一个没有 javaScript 的简单解决方案。

简而言之，我想先了解一下:

而不是(我目前得到的)这个:

我想到的一个解决方案是将每个 li 的 border-top 和 border-bot 设置为虚线，并将悬停设置为实线。但是，蓝色悬停的 li 会被 2 条虚线包围，所以这个想法是行不通的。

有什么好的解决办法吗？

Answer 1

尝试像这样修改下一个兄弟

li:hover + li {
  border: solid 1px #08C;
}

参见 Updated fiddle

根据评论更新

ul {
  list-style-type: none;
}
li {
  display: block;
  margin: 0;
  padding: 10;
  border-top: 1px dashed #08C;
}
li:hover {
  background-color: #08C;
}
li:hover + li {
  border-top: solid 1px #08C;
}

<ul>
  <li>Abc</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>
</ul>