能否修改鼠标移出（hover out）时的transition-delay过渡延迟？

当然可以实现，核心思路是把过渡配置拆分到元素的常态样式和hover状态样式中：鼠标移入时用hover里的延迟，移出时则使用常态样式里定义的延迟。

修改后的代码示例 #

HTML（无需改动）

<a href="#">Text</a>

CSS

/* 常态样式：定义过渡的基础参数 + 鼠标移出时的延迟 */
a {
  transition: all .5s linear;
  transition-delay: 0.40s;
}

/* Hover状态：只覆盖过渡延迟为移入时需要的0.25s */
a:hover {
  transition-delay: 0.25s;
  opacity: .5;
}

原理说明 #

• 鼠标移入元素时，触发:hover样式，此时会使用hover里设置的0.25s延迟，过渡到opacity: .5的状态
• 鼠标移出时，元素回到常态样式，此时会使用常态中设置的0.40s延迟，过渡回默认的opacity: 1状态
• 把过渡的时长和曲线（.5s linear）放在常态样式里，避免重复代码，只在hover状态中覆盖需要修改的延迟参数即可

内容的提问来源于stack exchange，提问作者Math