CSS中常常會使用:hover偽類來實現鼠標經過的效果，然而有時候需要給鼠標經過的元素加上延遲效果，即鼠標經過一定時間后才觸發該元素的效果。下面我們來看一下如何使用CSS實現另類的鼠標經過效果。

.delayed-hover {
transition-delay: 0.5s;
}
.delayed-hover:hover {
/* 在0.5秒后才會執行下面的樣式效果 */
color: red;
}

在這段CSS代碼中，我們使用了transition-delay屬性來設置延遲時間，單位為秒。然后我們在需要延遲觸發效果的元素上加上.delayed-hover類，并為其設置color屬性的值，當鼠標經過該元素時，會在0.5秒后才會觸發該元素文字顏色變紅的效果。

部分瀏覽器不支持transition-delay屬性，我們可以使用動畫效果來代替，如下所示：

.delayed-hover {
animation: delayed-hover 0.5s ease;
}
/* 關鍵幀動畫 */
@keyframes delayed-hover {
to {
color: red;
}
}

在這段CSS代碼中，我們使用了animation屬性來觸發delayed-hover動畫，延遲時間同樣為0.5秒，過渡效果為"ease"，即緩動效果。而在@keyframes中，我們設置了動畫從to(結果)狀態時元素文字顏色變紅的效果。

鼠標經過延遲效果可以讓我們的頁面看起來更加動感和生動，合理運用可以優化用戶體驗。CSS中的transition-delay和動畫效果可以實現該效果，值得我們學習和掌握。