javascript - CSS :hover rerender after covering element height 0

Question

我有一个元素，我称之为 back，被另一个元素覆盖，我称之为 front。

Back 在 CSS 中设置为在悬停时改变颜色。 Front 设置为在悬停时在 1s 延迟后消失，并且鼠标指针位于 Front 元素现在位于 back 元素 上。

Front 通过在 JavaScript 中设置 height: 0 消失。 Front 消失后，鼠标指针悬停在 Back 上，浏览器不会重新呈现悬停效果 < strong>Back 这导致其颜色没有按应有的方式更改。

当我通过从 DOM 中自然删除 Front 来尝试相同的示例时，它工作正常。不过，我的应用要求我通过设置 height: 0 来执行此操作。

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

该示例的要点是表明在蓝色框消失后，鼠标指针现在悬停在红色框上，因此它应该变为绿色。

在this example ，蓝色框已从 DOM 中完全删除，并且按预期工作。

在this example , 不过，蓝色框将通过设置 height: 0 来移除。消失后，红色元素不会变成绿色，直到我移动鼠标。

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

该问题在 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>