91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

CSS中hover怎樣設置延遲觸發

css
小樊
96
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毫秒后變為紅色。當鼠標離開按鈕時,背景顏色將立即恢復為藍色。

0
德格县| 汾阳市| 大洼县| 沁阳市| 拜城县| 南澳县| 运城市| 巩留县| 怀集县| 伊春市| 安龙县| 石狮市| 呈贡县| 宁波市| 濮阳市| 德令哈市| 亳州市| 定日县| 饶阳县| 襄樊市| 陕西省| 开阳县| 奎屯市| 桃园县| 九寨沟县| 简阳市| 炎陵县| 当阳市| 启东市| 肃宁县| 甘谷县| 鄄城县| 井陉县| 从化市| 天祝| 永丰县| 精河县| 华容县| 镇巴县| 锡林浩特市| 雅江县|