CSS列表悬停在Google Chrome中不起作用[重复]

Question

我有一个 HTML 列表，当鼠标悬停在每个列表项上时，文本和项目符号都会改变颜色。

HTML

<ul>
   <li>A bullet point</li>
   <li>Another bullet point</li>
   <li id="thirdpoint"><button onclick="document.getElementById('thirdpoint').innerHTML='Third bullet point';">Add bullet point</button></li>
</ul>

CSS

ul li:hover {
   color:red;
}

JSFiddle

输出应该如下所示，它可以在 Microsoft Edge、Internet Explorer、Firefox 和 Safari 中正常工作。

但是，Google Chrome 似乎无法正确呈现悬停。一方面，要点没有改变颜色。

当点击“添加项目符号”按钮时，项目符号有时会改变颜色，但当它发生时，即使将光标移出，它也会保持这种状态。调整窗口大小似乎可以解决这个问题。

那么我如何才能使 HTML/CSS 在 Google Chrome 中正常工作？我的直觉是，由于卡住的子弹点颜色可以自行纠正，这可能是浏览器错误。如果是这样，是否有任何解决方法？如果没有，我该如何修复代码？

Answer 1

这是一个你可以使用的技巧

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

<ul>
    <li>A bullet point</li>
    <li>Another bullet point</li>
    <li id="thirdpoint"><button onclick="document.getElementById('thirdpoint').innerHTML='Third bullet point';">Add bullet point</button></li>
</ul>