Css 下划线 animation 当 hover 和活动时
[英]Css underline animation when hover AND when active
问题描述
我正在尝试制作一个简单的导航菜单，其中包含带有动画下划线的按钮。 我正在使用 reactjs 库
如果按钮元素处于活动状态，我无法弄清楚如何让下划线立即可见。
.btn { position: relative; text-transform: uppercase; color: whitesmoke; font-size: 1.4rem; cursor: pointer; }.btn:hover { color: whitesmoke; text-decoration: none; }.btn:before { content: ""; position: absolute; width: 100%; height: 0.105rem; left: 0; bottom: 0; visibility: hidden; background-color: whitesmoke; transform: scaleX(0); transition: all 0.3s ease-in-out 0s; }.btn:hover:before { transform: scaleX(1); visibility: visible; } button.active.btn:before { visibility: visible; transform: scaleX(1); }
<a href="/"> <button id="home" className="btn active"> Home </button> </a> </div> <div className="col-4 col-sm-2"> <a href="/blog"> <button id="blog" className="btn"> Blog </button> </a>
1 个解决方案
解决方案1
0 2021-12-24 19:58:39
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<a href="/">
<button id="home" class="btn active">
Home
</button>
</a>
</div>
<div className="col-4 col-sm-2">
<a href="/blog">
<button id="blog" class="btn">
Blog
</button>
</a>
</body>
</html>
.btn {
position: relative;
text-transform: uppercase;
color: whitesmoke;
font-size: 1.4rem;
cursor: pointer;
border: none;
outline: none;
background-color: #332e2e77;
display: inline-block;
margin-bottom: 2rem;
}
.btn:hover {
color: whitesmoke;
text-decoration: none;
}
.btn::before {
content: '';
position: absolute;
width: 0%;
height: 0.105rem;
left: 0;
bottom: 0;
visibility: hidden;
background-color: rebeccapurple;
/* transform: scaleX(0); */
transition: all 0.3s ease-in-out 0s;
}
.btn:hover::before {
width: 100%;
transform: scaleX(1);
visibility: visible;
}
button.active .btn::before {
visibility: visible;
transform: scaleX(1);
}
现在尝试悬停。 className -> class 如评论中所述，我使用了 width 0% -> width 100%; 并下划线正确动画。
.btn:hover::之前
-> 你 select 伪选择器那样
CSS 悬停时动画下划线，保持活动状态
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.