[英]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