悬停时淡入边界

编程基础网前端问题

2022-01-01

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

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

编程基础网

本文标题为：悬停时淡入边界

上一篇： (REACT)使用CSS模块的CSSTransition

下一篇： CSS3变换：悬停时平移，带转场

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX