admin管理员组

文章数量:1432178

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;
}
<body>
  <div id="example-id">example text</div>
</body>

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;
}
<body>
  <div id="example-id">example text</div>
</body>

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

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?

  • javascript
  • html
  • css
  • google-chrome
  • css-selectors
Share Improve this question edited Nov 23, 2017 at 3:45 BoltClock 725k165 gold badges1.4k silver badges1.4k bronze badges asked Nov 20, 2017 at 13:36 thejonwithnohthejonwithnoh 6621 gold badge8 silver badges21 bronze badges 4
  • It appears to be a bug. I just filed it. – tao Commented Nov 20, 2017 at 14:06
  • 1 Note that forcing a repaint on the element in subsequent CSS seems to fix the issue (i.e.: .example-class {transform: scale(1)}). I'm mentioning because it's quite likely this prevented it from being noticed (in reality very few pages exist where at least one repaint is not triggered on page elements - thus making this bug almost impossible to notice). Very good find, by the way. – tao Commented Nov 20, 2017 at 14:29
  • @AndreiGheorghiu would you consider making this into an answer so I can mark it as accepted? – thejonwithnoh Commented Nov 22, 2017 at 13:50
  • Just did. Thank you. – tao Commented Nov 22, 2017 at 14:30
Add a ment  | 

2 Answers 2

Reset to default 5

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).

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.

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>

Using Chrome Version 90.0.4430.212 (Official Build) (x86_64), just had to add:

.my_element ul li {
  transform: scale(1);
}

Now all links work on Chrome. Before only some links on the page worked with Chrome, although everything worked on Safari Version 13.1.2 (13609.3.5.1.5). Thanks! Great Solution.

本文标签： javascriptcss hover not working in chrome for delayed dynamically added classesStack Overflow

版权声明：本文标题：javascript - css :hover not working in chrome for delayed dynamically added classes - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745593824a2665353.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。