Question

我有一个我称之为 back 的元素，我将其称为 front 。

在CSS中设置

Back 以更改悬停时的颜色。悬停时 Front 设置为在 1s 延迟和 Front上的鼠标指针后消失元素现在位于后退元素。

通过在JavaScript中设置 Front ，

height: 0 消失。在 Front 消失并且鼠标ointer悬停在 Back 后，浏览器不会重新渲染 {{上的悬停效果1}} 导致其颜色未按预期更改。

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

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

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

在this example中，蓝色框完全从DOM中删除，它的效果与预期的一样。

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

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

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

Answer 1

您可以添加一个类 foo ，而不是试图强制浏览器重新呈现，而 {{ 1}} 消失，然后在 bar 上恢复正常。

<强> CSS ：

mouseleave

<强>的JavaScript ：

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

查看以下代码段以获取直观表示。

<强>段：

＆＃13;

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");
}

＆＃13;

/* --- 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");
}

＆＃13;

/* --- 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;
}

＆＃13;

Answer 2

这看起来像浏览器问题，there are some ways on how to force webkit to redraw。但我真的不会为你推荐。您只需使用bar.style.display = 'none';而不是将高度设置为零。具有相同的效果，一切都按预期工作。看到这个小提琴：https://jsfiddle.net/zkhorh38/4/。

Answer 3

只需使用 transition 属性即可在CSS中执行此操作。

#foo {
  width: 200px;
  height: 200px;
  background-color:red;
  position: absolute;
  top:10px;
  left:15px;
  z-index: 10;
}

#foo:hover {
  background-color: green;
}

#bar {
  width: 200px;
  height: 200px;
  background-color:blue;
  position: absolute;
  top:100px;
  left:100px;
  z-index: 20;
  
  transition: all 1000000s; 
}

#bar:hover {
  transition: all 0.01s;
  opacity: 0;
  z-index: 1;
}

<div id="foo"></div>
<div id="bar"></div>

Answer 4

这可能是一个浏览器问题，但有一些方法可以强制webkit重绘。但我不建议你这样做。您只需使用 bar.style.display = 'none'; ，而不是将高度设置为零。

强制重绘/重绘的另一种方法可以正常工作：

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='';

**

为避免闪烁，您可以尝试'inline-block'，'table'或'run-in'而不是 'none' ，但这可能会产生副作用。此外，超时为0会触发回流，就像查询offsetHeight一样： sel.style.display = 'run-in'; setTimeout(function () { sel.style.display = 'block'; }, 0);

试试这个确实有效！

Answer 5

如果前 完全正面，您可以在 c.NotebookApp.open_browser = False 中设置 front.style['pointer-events'] = 'none' 强> onmouseenter 回调首先让鼠标激活后 :hover 规则前< / strong>消失。

请参阅modified working snippet。

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

5 个答案: