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的 border-top 更改为solid是没有问题的，但我不知道如何更改下一个li元素的 border-top 。

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

简而言之，我想继续这样：

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

我想到的一个解决方案是将每个li的 border-top 和 border-bot 设置为虚线并悬停在实体上。但是，蓝色徘徊的李将被2条虚线包围，所以这个想法不起作用。

对此有什么好的解决方案吗？

Answer 1

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

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

参见 Updated fiddle

根据评论更新

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

大纲只是覆盖了边界。

同样地，box-shadow: 0px 1px 0px 0px #08C;不会过度修饰，而是会在虚线边框的点之间闪现。

Answer 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，你可以将这个例子用于列表项目背景和悬停背景。

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

谢谢！

在垂直导航上叠加边框顶部

4 个答案: