如何将鼠标悬停在链接上时定位 li:before 和链接

Question

我有一个使用:before自定义编号的ol。

每个li都包含一个a。

代码笔演示

.HTML

<ol>
  <li><a href="#">Sample text</a></li>
  <li><a href="#">Sample text</a></li>
  <li><a href="#">Sample text</a></li>
</ol>

当用户将鼠标悬停在链接上时，我希望链接和自定义数字都改变颜色。

问题：

由于:before属于父级(li(，因此链接上的悬停事件无法定位它。

尝试的解决方案：

我在li上创建了悬停效果。但这允许链接外部的悬停导致颜色变化(即不直接在其上方(。

将li更改为display: inline-block会弄乱格式。

有没有一种简单的方法可以在将链接悬停在链接上时更改链接和伪元素的颜色？

如有必要，可以轻松修改 HTML。

片段

body {
  width: 700px;
  margin: 0 auto;
}
pre {
  background-color: lightgrey;
  padding: 4px;
}
ol {
  list-style: none;
  counter-reset: item;
}
ol li {
  margin-left: 2em;
}
.inline li{
  display: inline-block;
}
ol li:before {
  display: inline-block;
  content: counter(item) " ";
  counter-increment: item;
  margin-left: -2em;
  width: 2em;
}
a {
  color: #000;
  text-decoration: none;
}
li:hover {
  color: red;
}
li:hover a {
  color: red;
}

<p><pre>display: block</pre> - causes hover effect outside of link </p>
<ol>
  <li><a href="#">Sample text</a></li>
  <li><a href="#">Sample text</a></li>
  <li><a href="#">Sample text</a></li>
</ol>
<hr />
<p><pre>display: inline-block</pre> - organises list in a row
<ol class="inline">
  <li><a href="#">Sample text</a></li>
  <li><a href="#">Sample text</a></li>
  <li><a href="#">Sample text</a></li>
  <li><a href="#">Sample text</a></li>
  <li><a href="#">Sample text</a></li>
</ol>

Answer 1

我建议将 ：before从你的 "ol li" css 移动到你的 "a" 选择器。从：

ol li:before {
display: inline-block;
content: counter(item) " ";
counter-increment: item;
margin-left: -2em;
width: 2em;
}

自：

a:before {
display: inline-block;
content: counter(item) " ";
counter-increment: item;
margin-left: -2em;
width: 2em;
}

然后，无需担心在悬停上选择li的一部分，您只需使用a：hover，它将更改链接的数字和文本。

Answer 2

你可以对li有一个display: block使用一个小技巧：

 width: 0;
 white-space: nowrap;

看片段：

body {
  width: 700px;
  margin: 0 auto;
}
pre {
  background-color: lightgrey;
  padding: 4px;
}
ol {
  list-style: none;
  counter-reset: item;
}
ol li {
  margin-left: 2em;
  width: 0;
  white-space: nowrap;
}
ol li:before {
  display: inline-block;
  content: counter(item) " ";
  counter-increment: item;
  margin-left: -2em;
  width: 2em;
}
a {
  color: #000;
  text-decoration: none;
}
li:hover {
  color: red;
}
li:hover a {
  color: red;
}

<p><pre>display: block</pre> - doesn't cause hover effect outside of link </p>
<ol>
  <li><a href="#">Sample text</a></li>
  <li><a href="#">Sample text</a></li>
  <li><a href="#">Sample text</a></li>
</ol>