悬停时淡入边界 [英] Fade in border on hover

问题描述

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

我哪里出错了？

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

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

推荐答案

如果元素没有边框，则在悬停时会遇到一些问题，如页面移动、从头绘制边框等

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

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 */
}

这篇关于悬停时淡入边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！