我有一个元素,我称之为另一个元素,我称之为前面.

返回在CSS中设置以在悬停时更改颜色.当悬停时,前面被设置为在1秒延迟后消失,并且前面元素上的鼠标指针现在位于后面元素上.

通过在JavaScript中设置高度：0,前面消失.在Front消失并且鼠标ointer悬停在Back上之后,浏览器不会在Back上重新渲染悬停效果,这会导致其颜色未按预期更改.

当我通过自然地从DOM中删除Front来尝试相同的示例时,它可以正常工作.但是,我的应用程序要求我通过设置height：0来执行此操作.

您可以在以下示例中自行尝试.你会看到一个红色的盒子和一个蓝色的盒子.红色是正面,蓝色是背面.将鼠标指针移动到红色框时,红色框的颜色变为绿色.当您将鼠标移动到蓝色框上时,一秒钟后它将消失.

示例的要点是显示蓝框消失后,鼠标指针现在悬停在红色框上,因此应该变为绿色.

在this example中,蓝色框完全从DOM中移除,它的工作原理与预期的一样.

但是在this example中,通过设置高度来移除蓝色框：0.消失后,红色元素在移动鼠标之前不会变为绿色.

有没有办法强制浏览器重新渲染？

问题仍然存在于Google Chrome和Microsoft Edge中. Firefox运行良好.

解决方法:

您可以只在foo中添加一个类,使其在条消失时变为绿色,然后在mouseleave上恢复正常,而不是试图强制浏览器重新渲染.

CSS：

#foo.hover, /* <- I just added this */
#foo:hover {
    background-color: green;
}

JavaScript的：

var
  foo = document.getElementById("foo"),
  bar = document.getElementById("bar");

/* Set the 'mouseenter' event for bar to set the height to 0 and & the 'hover' class. */
bar.onmouseenter = function() {
  setTimeout(function() {
    bar.style.height = 0;
    foo.classList.add("hover");
  }, 1000);
}

/* Set the 'mouseleave' event for bar to remove the 'hover' class. */
bar.onmouseleave = function() {
  foo.classList.remove("hover");
}

查看以下代码段以获得可视化表示.

片段：

/* --- JavaScript --- */
var
  foo = document.getElementById("foo"),
  bar = document.getElementById("bar");

/* Set the 'mouseenter' event for bar. */
bar.onmouseenter = function() {
  setTimeout(function() {
    /* Set the height to 0. */
    bar.style.height = 0;
    
    /* Add the 'hover' class. */
    foo.classList.add("hover");
  }, 1000);
}

/* Set the 'mouseleave' event for bar. */
bar.onmouseleave = function() {
  /* Remove the 'hover' class. */
  foo.classList.remove("hover");
}

/* --- CSS --- */
#foo {
  width: 200px;
  height: 200px;
  background-color: red;
  position: absolute;
  top: 10px;
  left: 15px;
}
#foo.hover,
#foo:hover {
  background-color: green;
}
#bar {
  width: 200px;
  height: 200px;
  background-color: blue;
  position: absolute;
  top: 100px;
  left: 100px;
}

<!-- HTML -->
<div id = "foo"></div>
<div id = "bar"></div>