在垂直导航上覆盖边框顶部答案

【问题标题】：Overlay border-top on vertical navigation在垂直导航上覆盖边框顶部
【发布时间】：2016-04-26 04:11:10
【问题描述】：

<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 周围的虚线边框是实心的。把悬停的li的border-top改成solid是没问题的，但是下一个li元素的border-top不知道怎么改。

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

简而言之，我想悬停一下：

而不是（我目前得到的）这个：

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

有什么好的解决办法吗？

【问题讨论】：

标签： html css

【解决方案1】：

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

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

见Updated fiddle

根据 cmets 更新

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>

【讨论】：

对于这种方法，我建议在悬停时将border-style 更改为纯色而不是完全删除它，否则当您悬停时列表会稍微跳动。

【解决方案2】：

您可以给每个li 一个负边距顶部，以便悬停背景覆盖边框：

ul{
  list-style-type: none;
}

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

li:hover{
  background-color: #08C;
}

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

【讨论】：

【解决方案3】：

我投票支持ochi的答案，但我想指出基于outline的另一个解决方案：

ul{
  list-style-type: none;
}

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

li:hover{
  background-color: #08C;
  outline:1px solid #08C;
}

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

大纲只是覆盖了边框。

同样box-shadow: 0px 1px 0px 0px #08C; 不会过度绘制，而是在虚线边框的点之间发光。

【讨论】：

【解决方案4】：

哇！我是新来的，但我想为您的问题贡献我的两便士：

这是我认为可能会有所帮助的解决方案：

您是否了解 CSS“nth-child”选择器，它可以帮助您以适合您的方式自定义块元素？例如你可以试试这个：

  p:nth-child(odd) {
    color: green;
  }

<html>

<head>
</head>

<body>
  <p>use the nth child</p>
  <!...odd 1...>
  <p>use the nth child</p>
  <!...even 2...>
  <p>use the nth child</p>
  <!...odd 3...>
  <p>use the nth child</p>
  <!...even 4...>
  <p>use the nth child</p>
  <!...odd 5...>
  <p>use the nth child</p>
  <!...even 6...>
</body>
<html>

这会将那些奇怪的块元素更改为绿色。

我猜你有 html 方面的知识，你可以将这个例子用于你的列表项背景和悬停背景。

其他值可以是您希望应用样式的连续数字。

谢谢！

【讨论】：