悬停时淡入边框答案

【问题标题】：Fade in border on hover悬停时淡入边框
【发布时间】：2020-04-16 15:43:40
【问题描述】：

我想在悬停时淡入边框。我有以下内容，但一开始什么都没有，然后变成 1px 灰线（灰色是默认颜色），然后最终变成 2px 红线。

我怎么了？

a{ 
    border-bottom: none;
    transition: border-bottom 1s;
}
a:hover{
    border-bottom: 2px solid red;
}

&lt;a href='#'&gt;hover here&lt;/a&gt;

【问题讨论】：

标签： css css-transitions

【解决方案1】：

当一个元素没有边框时，添加悬停时会遇到一些问题，例如页面移动、从头开始绘制边框等

解决方法：先尝试设置边框透明，这样它就在那里但看不到：

a { 
    border-bottom: 2px solid transparent; /* <- here */
    transition: border-bottom 1s;
    text-decoration: none; /* I added this for clarity of effect */
}
a:hover {
    border-bottom: 2px solid red;
}

&lt;a href=""&gt;testing border&lt;/a&gt;

编辑

其实不用再声明整个边框，换个颜色就好了：

a:hover {
    border-color: red; /* <-- just change the color instead */
}

【讨论】：

【解决方案2】：

您需要默认为超链接提供一个边框，该边框的颜色应该是透明的。稍后在悬停时，您可以修改它的颜色。将其余部分留在 transition 属性中。

自己看吧。

a { 
    border-bottom: 2px solid transparent;
    transition: border-bottom 1s;
    text-decoration: none;
}
a:hover {
    border-bottom-color: red;
}

&lt;a href="#"&gt;Demo Hyperlink&lt;/a&gt;

干杯！

【讨论】：

【解决方案3】：

为什么会这样

你得到这个是因为你的过渡和你元素的初始值。所有元素都有默认值，即使这些不是您定义的。例如，<div> 元素的默认值始终为 display: block，<b> 元素的默认值始终为 font-weight: bold。

同样，您的<a> 标签具有border-bottom-color: rgb(0, 0, 0)。即使边框的厚度为零也是如此。

在 chrome 中，您可以在“元素”选项卡的“计算”部分看到所有这些：

所以当过渡开始时，它会逐渐将颜色从黑色变为您定义的红色。

如何解决

您需要做的是用您自己的覆盖默认值。这是为了防止它一开始是黑色的。

a{ 
    border-bottom: 2px solid transparent;
    transition: border-bottom 1s;
}
a:hover{
    border-bottom: 2px solid red;
}

提示是始终在悬停“之前”和“期间”为元素定义相同的属性。您应该注意的另一件事是，使用none 作为初始值通常不会给您想要的行为。转换需要一个数值作为起点（例如0）。

【讨论】：