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.