CSS中hover怎樣設(shè)置延遲觸發(fā)

css
小樊
81
2024-10-21 19:17:21

在CSS中，hover偽類選擇器本身不支持延遲觸發(fā)。但是，您可以使用JavaScript（或者jQuery）來實(shí)現(xiàn)延遲觸發(fā)hover效果。

以下是使用JavaScript實(shí)現(xiàn)延遲觸發(fā)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; // 延遲時(shí)間，單位毫秒

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

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

在這個(gè)示例中，當(dāng)鼠標(biāo)移入按鈕時(shí)，背景顏色將在300毫秒后變?yōu)榧t色。當(dāng)鼠標(biāo)離開按鈕時(shí)，背景顏色將立即恢復(fù)為藍(lán)色。

0 踩