悬停时淡入边框

Question

我想在鼠标悬停时淡入一个边框。我有以下代码，但它一开始什么也没有，然后变成1像素的灰线（灰色是默认颜色），最终变成2像素的红线。

我做错了什么？

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

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

- panthro

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

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

编辑

实际上，您不需要重新声明整个边框，只需更改颜色：

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

- StudioTime

Answer 2

您需要默认为超链接提供边框，其颜色应透明。在悬停时，您可以修改其颜色。其余内容保留“transition”属性。

请自行查看。

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

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

Cheers!

- Rahul

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）。

- Chris