本文介绍了悬停时淡入边界的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在悬停时淡入边框。我有以下内容，但它开始时什么都没有，然后变成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 */
}
这篇关于悬停时淡入边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！