Question

我在这里创建了一个简单的示例： https://codepen.io/marekKnows_com/pen/LaRPZv

我想做的是在鼠标悬停在蓝色框上2秒钟后显示红色框。当鼠标离开蓝色框时，我希望红色框立即消失。

HTML代码如下：

<div id="blueBox">
</div>
<div id="redBox" class="">
</div>

CSS代码：

#blueBox {
  background-color: blue;
  width: 200px;
  height: 50px;
}
#redBox {
  display: none;
  background-color: red;
  width: 200px;
  height: 50px;
  transition: display 0s step-end 2s;
}
#redBox.isVisible {
  transition: display 0s step-end 0s;
  display: block;
}

和JS代码：

const el = document.getElementById( 'blueBox' );
const redEl = document.getElementById( 'redBox' );

el.addEventListener( 'mouseover', () => {
  redBox.classList.add( 'isVisible' );
});

el.addEventListener( 'mouseout', () => {
  redBox.classList.remove( 'isVisible' );
});

我看到的是，红色框没有等待2秒钟才显示红色框。为什么？

Answer 1

为此使用可见性属性，因为您无法通过显示属性进行过渡。

显示的CSS转换延迟不起作用

1 个答案: