CSS 悬停过渡

Question

我知道这里已经有很多此类问题，但我找不到问题的答案。我有一个 div 和一个 class，并在 class 中添加了一个过渡。如果我悬停在上面，一切正常，但如果我 取消悬停 ，div 只是 立即跳回其默认大小 。这是代码：

#text {
            width: 300px;
            height: 150px;
            background-color: lightgray;
            border-radius: 10px;
            margin: auto;
            padding: 5px;
            transition: all 0.1s ease-in;
        }

         #text:hover {
            border-left: 10px groove;
            border-top: 10px groove;
        }

<div id="text">
        <p>If you want to know how to get started as a web developer, take a look at my youtube channel</p>
    </div>

如果有人能帮助我，我将不胜感激。

Answer 1

边框样式属性是 not animatable，因此您应该为 border-width 属性添加动画。将相同的边框添加到初始状态（未悬停），除了宽度：将其设置为 0px。

#text {
  width: 300px;
  height: 150px;
  background-color: lightgray;
  border-left: 0px groove;
  border-top: 0px groove;
  border-radius: 10px;
  margin: auto;
  padding: 5px;
  transition: all 0.1s ease-in;
}

#text:hover {
  border-left: 10px groove;
  border-top: 10px groove;
}

<div id="text">
  <p>If you want to know how to get started as a web developer, take a look at my youtube channel</p>
</div>

CSS 悬停过渡

CSS unhover transition

html

css

hover

transition