CSS:覆盖元素高度0后悬停重新渲染

Question

我有一个我称之为back另一个元素的元素front.

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

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

当我通过自然地Front从DOM中删除它来尝试相同的例子时它工作正常.不过,我的应用程序要求我通过设置来完成此操作height: 0.

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

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

在此示例中,蓝色框完全从DOM中删除,它的工作方式与预期的一样.

但是,在此示例中,将通过设置删除蓝色框height: 0.消失后,green直到我移动鼠标后才会出现红色元素.

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

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

Answer 1

您可以只添加一个类foo,使其在bar消失时变为绿色,然后返回到正常状态,而不是试图强制浏览器重新渲染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>