CSS hover过渡异常：鼠标移出div时边框无平滑过渡效果

嘿，这个问题我之前也碰到过！其实核心原因很简单——你的元素初始状态没给浏览器留好过渡的“基础”，导致移出时边框直接“跳没”了。

问题根源 #

如果你的CSS只在:hover状态里定义了边框，或者初始状态没设置完整的边框属性（比如只加了border-color却没设border-style/border-width），浏览器就没法计算从“有边框”到“无边框”的过渡动画——因为初始状态下边框根本不存在，移出时只能直接消失。

正确解决方案 #

要让移入移出都有平滑过渡，你需要：

• 给div设置初始的边框基础样式（视觉上不可见，但属性存在）
• 把transition属性放在div的默认样式中（而不是只在:hover里）
• hover时仅修改边框的可过渡属性（比如颜色、宽度）

示例1：边框颜色过渡（最常用）

HTML代码：

<div class="hover-border-box">鼠标移上来看看~</div>

CSS代码：

.hover-border-box {
  width: 250px;
  height: 120px;
  padding: 15px;
  background-color: #f5f5f5;
  /* 初始边框：宽度、样式固定，颜色透明 */
  border: 2px solid transparent;
  /* 给边框颜色添加过渡动画，时长可自定义 */
  transition: border-color 0.3s ease-in-out;
}

.hover-border-box:hover {
  /* hover时仅修改边框颜色 */
  border-color: #2ecc71;
}

示例2：边框宽度过渡

如果想要边框从无到有（宽度变化）的效果，要注意初始状态必须保留border-style：

.hover-border-box {
  width: 250px;
  height: 120px;
  padding: 15px;
  background-color: #f5f5f5;
  /* 初始宽度为0，样式和颜色固定 */
  border-width: 0;
  border-style: solid;
  border-color: #2ecc71;
  /* 给边框宽度添加过渡 */
  transition: border-width 0.3s ease;
}

.hover-border-box:hover {
  border-width: 2px;
}

关键注意点 #

• 不要在:hover里新增border-style（比如从none改成solid），这种离散属性的切换是无法过渡的，必须保证初始和hover状态的border-style一致。
• transition属性一定要放在元素的默认样式中，这样移入和移出时都会触发动画。

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