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

Posted 2023-02-23

【中文标题】CSS列表悬停在Google Chrome中不起作用[重复]

【英文标题】：CSS list hovering not working in Google Chrome [duplicate]

【发布时间】：2016-05-16 00:36:36

【问题描述】：

我有一个 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 中正常工作？我的直觉是，由于卡住的子弹点颜色可以自行纠正，这可能是浏览器错误。如果是这样，是否有任何解决方法？如果没有，我该如何修复代码？

【问题讨论】：

升级到 Chrome 49 后，我的 JSFiddle 工作正常。因此，我可以得出结论，这可能是 Google Chrome 的一个错误。

【参考方案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>

【讨论】：

@Pangloss 说得对……在我自己的代码中就有这样的东西，所以它有点出现了:)