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

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

#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>

Answer 2

正常情况下不需要边框，因此将其设置为0。然后同一件事需要过渡，否则动画将不会发生...

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

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

边框过渡持续时间仅适用于鼠标悬停而不适用于鼠标移出

2 个答案: