悬停时淡入边框

Question

我希望在悬停时淡入边框。我有以下但它开始时没有任何东西然后去1px灰线（灰色是默认颜色），然后最终变成2px红线。

我出错了什么？

＆＃13;

＆＃13;

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

＆＃13;

<a href='#'>hover here</a>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

解决方案：首先尝试将边框设置为透明，所以它在那里但是无法看到：

＆＃13;

＆＃13;

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;
}

＆＃13;

<a href="">testing border</a>

＆＃13;

＆＃13;

＆＃13;

Answer 2

默认情况下，您需要为超链接提供边框，该超链接应该是透明的颜色。稍后悬停时，您可以修改它的颜色。将剩下的部分留在transition财产上。

亲自看看。

＆＃13;

＆＃13;

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

＆＃13;

<a href="#">Demo Hyperlink</a>

＆＃13;

＆＃13;

＆＃13;

干杯！

Answer 3

为什么会发生这种情况

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

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

在chrome中，您可以在“Elements”选项卡的“computed”部分中看到所有这些：

因此，当转换开始时，它会逐渐将颜色从黑色更改为您定义的红色。

如何修复

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

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

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