css：悬停在chrome中无法延迟动态添加的类
Posted
技术标签:
【中文标题】css：悬停在chrome中无法延迟动态添加的类【英文标题】：css :hover not working in chrome for delayed dynamically added classes 【发布时间】：2018-05-03 18:01:33 【问题描述】：我有以下代码，它只是创建一个 div，当将鼠标悬停在它上面时，应该将其背景颜色更改为红色：
setTimeout(function()
document.getElementById('example-id').className = 'example-class';
, 1);.example-class:hover
background: red;
<body>
<div id="example-id">example text</div>
</body>这段代码似乎在我测试过的所有浏览器中都可以使用，除了 google chrome。具体来说，我使用以下操作系统和浏览器对其进行了测试：
Windows 10 家庭版：版本 1703 铬：62.0.3202.94 火狐：57.0 Firefox ESR：52.5.0 边缘：40.15063.674.0 IE11：11.726.15063.0 OS X El Capitan：版本 10.11.6 Safari：版本 11.0.1但是，如果我删除 setTimeout 函数的使用，以便立即将类添加到 div 中，那么代码在所有浏览器中都可以正常工作。
那么为什么会这样呢？这是 google chrome 中的错误，还是某个规范中的歧义，还是其他原因？
【问题讨论】：
这似乎是一个错误。我只是filed it。 请注意，在后续 CSS 中强制重绘元素似乎可以解决问题（即：.example-class transform: scale(1)）。我之所以提到它，是因为这很可能会阻止它被注意到（实际上很少有页面存在没有在页面元素上触发至少一次重绘 - 因此几乎不可能注意到这个错误）。顺便说一句，很好的发现。
@AndreiGheorghiu 您是否会考虑将其作为答案，以便我将其标记为已接受？
刚刚做了。谢谢。
【参考方案1】：
这绝对是 Chrome 中的一个错误，寻找它的道具。
我已将其提交here 并在不到 24 小时内将其标记为另一个 bug 的副本，这是另一个 bug 的副本，最终追溯到this one。它似乎与常量命名冲突有关，或者至少这就是我所做的。 （出于纯粹的好奇，我昨晚花了相当多的时间跟踪错误的踪迹）。
据报告 this revision 已修复此问题，但我对 Chromium/Chrome 版本控制的了解还不够，无法告诉您何时将其变为稳定的 Chrome。
同时，我发现的解决方法是在声明 :hover 规则后强制重新绘制元素。例如：transform:scale(1);。
测试修复，直到正确的错误修复使其成为稳定的 Chrome：
setTimeout(function()
document.getElementById('foo').className = 'bar';
);.bar:hover
color: red;
.bar
transform: scale(1);
<div id="foo">example text</div>【讨论】：
哇！谢谢。我遇到了这个并且在 chrome 62 上，更新到 63 修复了这个【参考方案2】：使用 Chrome 版本 90.0.4430.212 (Official Build) (x86_64)，只需添加：
.my_element ul li
transform: scale(1);
现在所有链接都可以在 Chrome 上使用。之前只有页面上的一些链接适用于 Chrome，尽管一切都适用于 Safari 版本 13.1.2 (13609.3.5.1.5)。谢谢！很好的解决方案。
【讨论】：
以上是关于css：悬停在chrome中无法延迟动态添加的类的主要内容，如果未能解决你的问题，请参考以下文章