css:悬停不在chrome中用于延迟动态添加的类

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

我有以下代码,它只是创建一个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>

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.

但是,如果我删除了setTimeout函数的使用,以便将类立即添加到div中,那么代码将在所有浏览器中按预期工作。

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 个解决方案

#1


5  

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

这绝对是Chrome中的一个漏洞,也是寻找它的道具。

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

同时,我发现的修复是在声明了:悬停规则后强制对元素进行重新绘制。例如:transform:scale(1);.

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

测试修复,直到正确的错误修复使其成为稳定的Chrome:

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

#2


0  

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

首先,这似乎是谷歌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>

智能推荐

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.itdaan.com/blog/2017/11/20/7def77ca29ca2f1d206ee4b6d5acf928.html



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

赞助商广告