在css动画效果开发中，不少开发者会遇到把transition属性写在hover伪类里，鼠标悬停时样式瞬间切换没有过渡效果的问题。这是因为css过渡的工作机制要求过渡属性必须定义在元素的初始状态中，hover伪类仅用于触发样式变化，若过渡规则只存在于hover状态，元素离开hover时无法读取到过渡配置，自然就不会产生平滑过渡的效果。
为什么过渡要写在默认状态
css过渡的核心是监听元素样式的变化，当元素的某个属性值发生改变时，按照预设的过渡规则完成平滑切换。如果把transition写在hover里，只有在鼠标悬停时元素才会拥有过渡配置，此时样式从默认状态切换到hover状态没有过渡规则可遵循，就会直接跳变。而当鼠标离开hover区域时，元素失去hover状态，连过渡配置也一并消失，同样无法产生过渡效果。
正确的写法示例
正确的做法是将transition属性写在元素的默认选择器中，hover伪类里只写需要变化的样式属性，具体代码如下：
/* 默认状态：定义过渡规则 */
.box {
width: 100px;
height: 100px;
background-color: #409eff;
/* 过渡写在默认状态，监听所有属性变化，过渡时长0.3秒 */
transition: all 0.3s ease;
}
/* hover状态：只写目标样式 */
.box:hover {
width: 200px;
background-color: #f56c6c;
}
上述代码中，.box的默认状态已经定义了过渡规则，当鼠标悬停时width和background-color的变化会按照0.3秒的时长平滑过渡，鼠标离开时也会平滑回到初始状态。
常见错误写法对比
下面是错误的写法示例，大家可以对照排查自己的代码：
/* 错误写法：过渡写在hover里 */
.error-box {
width: 100px;
height: 100px;
background-color: #409eff;
}
.error-box:hover {
width: 200px;
background-color: #f56c6c;
/* 过渡只存在于hover状态，不生效 */
transition: all 0.3s ease;
}
其他可能导致过渡不生效的原因
- 过渡属性写错：比如把transition写成transiton，或者参数顺序错误，正确的简写顺序是 property duration timing-function delay
- 变化的属性不在过渡监听范围内：如果默认状态写的是transition: width 0.3s，hover里改background-color就不会有过渡效果
- 样式优先级问题：如果hover里的样式被更高优先级的规则覆盖，属性没有实际变化，过渡也不会触发
总结
解决css过渡写在hover里不生效的问题，核心就是把transition属性移到元素的默认选择器中，hover伪类仅用于定义样式变化的目标值。只要遵循这个规则，同时排查属性拼写、监听范围、样式优先级等问题，就能快速让过渡效果正常工作。
css_transitionhover默认状态过渡生效样式设置修改时间：2026-06-25 01:48:24