CSS中hover怎样设置延迟触发

avatar
作者
猴君
阅读量:0

在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毫秒后变为红色。当鼠标离开按钮时,背景颜色将立即恢复为蓝色。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!