html - 悬停时更改列表项元素符号/数字颜色

Question

我试图在悬停时更改列表项的颜色，包括元素符号/编号和文本。我在 Google Chrome 中遇到一个问题，只有文本在改变颜色。我错过了什么吗？

HTML:

<ul>
    <li>test</li>
</ul>

<ol>
    <li>test</li>
</ol>

CSS:

ol li:hover,
ul li:hover {
    color: red;
}

JSFiddle: https://jsfiddle.net/yf0yff1c/2/

Answer 1

您可以在 :before 中添加元素符号，然后为其应用任何有效的 CSS:

li {
  list-style: none;
}
li:before {
  content: "• ";
  color: black;
}
ol {
  counter-reset: item;
}
ol li {
  display: block;
}
ol li:before {
  content: counter(item)". ";
  counter-increment: item;
  color: black;
}
li:hover:before {
  color: red;
}

<ul>
  <li>HOVER ME</li>
</ul>

<ol>
  <li>HOVER ME</li>
</ol>