在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)色。