前端之家收集整理的这篇文章主要介绍了
css – 悬停时淡入边框，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
我希望在悬停时淡入边框.我有以下但它开始时没有任何东西然后去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>
原文链接：https://www.f2er.com/css/215377.html
