html - 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>