CSS中hover怎样设置延迟触发

css

小樊

162

2024-10-21 19:17:21

栏目: 编程语言

在CSS中，hover伪类选择器本身不支持延迟触发。但是，您可以使用JavaScript（或者jQuery）来实现延迟触发hover效果。

以下是使用JavaScript实现延迟触发hover效果的示例代码：

HTML:

<button id="myButton">Hover me!</button>

CSS:

#myButton {
  background-color: blue;
  color: white;
}

#myButton.delayed-hover {
  background-color: red;
}

JavaScript:

const button = document.getElementById('myButton');
let delay = 300; // 延迟时间，单位毫秒

button.addEventListener('mouseenter', () => {
  setTimeout(() => {
    button.classList.add('delayed-hover');
  }, delay);
});

button.addEventListener('mouseleave', () => {
  button.classList.remove('delayed-hover');
});

在这个示例中，当鼠标移入按钮时，背景颜色将在300毫秒后变为红色。当鼠标离开按钮时，背景颜色将立即恢复为蓝色。

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

CSS中hover怎样设置延迟触发

最新问答

相关标签