Question

我有ol使用:before进行自定义编号。

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

您可以使用li的{{1}}：

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

Answer 2

我建议你先从你的＆＃34; ol li＆＃34; css to your＆＃34; a＆＃34;选择。从：

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的一部分，而只需使用：hover，它会更改链接的数量和文本。

如何定位li：之前和链接时将鼠标悬停在链接上？

2 个答案: