我的代码在悬停时有效，但在悬停时无效

Question

Alright, so when I use this code and hover over the object, the transition works. But if I take my mouse OFF of the object, the transition doesn't happen. I've seen other posts talk about this but the solutions don't work.

这是我的 CSS 代码：

.square{
margin-top: 20px;
  height: 100px;
  width: 400px;
  border-radius: 20px;
  background:#3d3434;
  outline: none;
  transition: 0.25s;
}

.square:hover{
    outline: 3px solid #21ff46;
}

另外，我对编码和 CSS 还比较陌生。

Answer 1

您的代码可以正常工作。在 mouseleave 上看不到动画的原因是，hover 伪状态结束后，根本没有轮廓，浏览器不知道他必须将轮廓缩小到什么位置。它也不知道在收缩时应该保留什么颜色，没有悬停状态就没有定义颜色。

因此，解决方案是将此行添加到您的 .square 中

outline: 0 solid #21ff46;

其余的保持原样，你的问题就解决了。