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>


注意!

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



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