html - Border Transition Duration 仅适用于鼠标悬停，不适用于鼠标移开

Question

我试图发现为什么边框过渡持续时间仅适用于鼠标悬停。如果将鼠标悬停在演示上，会看到边框需要 0.3 秒才能出现，但在移动鼠标时，它会立即消失。

为什么会这样？即使对所有元素应用过渡延迟失败。

#test {
  width: 100%;
  background: lightgreen;
  min-height: 100px;
  box-sizing: border-box;
}
#test:hover {
  border: 5px solid red;
  transition: all 0.3s ease;
}

<div id='test'>stuff</div>

Answer 1

因为默认情况下您没有定义边框，请尝试将边框属性设置为默认值，并将您的过渡设置为默认值，这是您的过渡不起作用的第二个原因

#test {
  width: 100%;
  background: lightgreen;
  min-height: 100px;
  box-sizing: border-box;
  transition: all 0.3s ease;
  border: 0 solid red;
}
#test:hover {
  border-width: 5px;
}

<div id='test'>stuff</div>