[英]css :hover not working in chrome for delayed dynamically added classes

I have the following code, that simply creates a div, which when hovered over, should change its background color to red:


setTimeout(function() {
  document.getElementById('example-id').className = 'example-class';
}, 1);
.example-class:hover {
  background: red;
  <div id="example-id">example text</div>

This code seems to work in all of the browsers that I've tested it in, with the exception of google chrome. Specifically, I've tested it with the following operating systems and browsers:


  • Windows 10 Home: Version 1703
    • Chrome: 62.0.3202.94
    • Chrome:62.0.3202.94
    • Firefox: 57.0
    • Firefox:57.0
    • Firefox ESR: 52.5.0
    • Firefox ESR:52.5.0
    • Edge: 40.15063.674.0
    • 边缘:40.15063.674.0
    • IE11: 11.726.15063.0
    • IE11:11.726.15063.0
  • Windows 10主页:版本1703 Chrome:62.0.3202.94 Firefox:57.0 Firefox ESR:52.5.0 Edge:40.15063.674.0 IE11:11.726.15063.0
  • OS X El Capitan: Version 10.11.6
    • Safari: Version 11.0.1
    • Safari:版本11.0.1
  • OS X El Capitan:版本10.11.6 Safari:版本11.0.1

However, if I remove the use of the setTimeout function, so that the class is added to the div immediately, then the code works as expected in all browsers.


So why is this happening? Is this a bug in google chrome, or an ambiguity in some spec somewhere, or is it something else?


2 个解决方案



It's definitely a bug in Chrome, props for finding it.


I've filed it here and in less than 24 hours it was marked as duplicate of another bug, which is a duplicate of another bug, in the end tracing back to this one. It appears to have to do with a constants naming conflict, or at least that's what I made of it. (I've spent a fair amount of time last evening following the bug trail, out of sheer curiosity).

我已经在这里提交了它,并且在不到24小时内它被标记为另一个错误的副本,这是另一个错误的副本,最后追溯到这个错误。它似乎与命名冲突的常量有关,或者至少是我所做的。 (出于纯粹的好奇心,我昨晚在虫道后花了相当多的时间)。

It has been reported as fixed by this revision, but I don't know enough on Chromium/Chrome versioning to tell you when that will make it into stable Chrome.

据报道,此版本已修复,但我对Chromium / Chrome版本控制的了解不足以告诉您什么时候可以使其成为稳定的Chrome版本。

Meanwhile, the fix I found is to force a repaint on the element, after the :hover rule has been declared. For example: transform:scale(1);.


Test for fix, until proper bugfix makes it into stable Chrome:


setTimeout(function() {
  document.getElementById('foo').className = 'bar';
.bar:hover {
  color: red;
.bar {
  transform: scale(1);
<div id="foo">example text</div>



First, this seems to be a bug in Google Chrome.


One possible alternate solution to overcome this situation by using vanilla JavaScript's mouseover and mouseleave is (Google Chrome - Version 62.0.3202.94 ):

使用vanilla JavaScript的mouseover和mouseleave克服这种情况的一种可能的替代解决方案是(Google Chrome - 版本62.0.3202.94):

setTimeout(function () {

  var targetEl=document.getElementById('example-id'); 

  targetEl.addEventListener("mouseover", function( event ) {
    event.target.style.backgroundColor = "red";
  }, false);

  targetEl.addEventListener("mouseleave", function( event ) {   
    event.target.style.backgroundColor = "";		    
  }, false);

}, 1);
<div id="example-id" >example text</div>



粤ICP备14056181号  © 2014-2020 ITdaan.com