如何解决悬停时带下划线的菜单项jumpig
我试图在悬停菜单项上加下划线。我的代码如下:
a:hover {
color: black;
border-bottom: 3px solid black;
padding-bottom: 5px;
}
当我使用此代码时,菜单会在悬停时跳转。
我的页面:
https://www.webpreludi.online/
如何仅使下划线效果跳出菜单?
解决方法
您需要从边框开始并在原始锚点上填充,否则您将始终具有这种效果。从透明的边框开始:
a {
display: inline-block;
padding-bottom: 5px;
border-bottom: 3px solid transparent;
text-decoration: none;
}
a:hover {
color: black;
border-bottom-color: black;
}
<a href="#">test</a>
,
在CSS中使用text-decoration: underline;
,然后从代码中删除border-bottom
和padding-bottom
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。