悬停时更改列表项项目符号/编号颜色答案

【问题标题】：Changing list item bullet/number color on hover悬停时更改列表项项目符号/编号颜色
【发布时间】：2016-03-17 02:06:50
【问题描述】：

我正在尝试更改悬停时列表项的颜色，包括项目符号/编号和文本。我在谷歌浏览器中遇到了一个问题，只有文本在改变颜色。我错过了什么吗？

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/

【问题讨论】：

See this answer
复制：stackoverflow.com/questions/1470214/…
@Topr 这适用于无序列表，但有序列表呢？
认为这是一个重复的问题，看看这个。 one

标签： html css

【解决方案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>

【讨论】：

我已经更新了我的问题，使其更加清晰。我需要更改有序列表和无序列表的颜色。

【解决方案2】：

没有直接的方法可以做到这一点。您需要实施这样的解决方法

    ul {
      list-style: none;
    }

    ul li:before {
      content:"\2022";
      margin-right: 5px;
      font-size: 20px;
      font-weight: bold;
    }

    ul li:hover {
      color: red;
    }

    ul li:hover:before {
      color: red;
    }

<ul>
<li>test1</li>
<li>test2</li>
</ul>

Check out this question 为有序列表实现类似的东西。

【讨论】：

【解决方案3】：

您可以在您的 CSS 中执行此操作。通过添加li:before，您可以同时更改项目符号和文本颜色。

li {
  list-style: none;
}
li:before {
  content: "• ";
  color: black;
}
li:hover:before {
  color: red;
}
li:hover {
  color: red;
}

【讨论】：

【解决方案4】：

li:hover {
  color: green;
}

li::marker {
  color: red;
}

li:hover::marker {
  color: blue;
}

.decrease-spacing {
  text-indent: -8px;
}

.increase-spacing {
  text-indent: 20px;
}

<body>
  <ul>
    <li>Lorem, ipsum dolor.</li>
    <li>Lorem, ipsum dolor.</li>
    <li>Lorem, ipsum dolor.</li>
    <li class="decrease-spacing">Lorem, ipsum dolor.</li>
    <li class="increase-spacing">Lorem, ipsum dolor.</li>
  </ul>
</body>

【讨论】：