我有兩個鏈接，即“總用戶”和“用戶資訊”。默認情況下，“用戶總數”帶有下劃線，但是當我單擊“用戶資訊”時，下劃線會移動到單擊的鏈接，然后再次回傳到其默認位置，即“用戶總數”。有人可以幫我解決這個問題嗎，我想在我點擊的鏈接上加下劃線
我的 HTML 代碼：
<nav>
<a style="margin-left: 140px;"
routerLink="totalUsers"
routerLinkActive="active" id="uno" class="one">
Total Users
</a>
<a routerLink="usersInformation"
routerLinkActive="active" id="dos" class="two">
Users Information
</a>
<hr/>
</nav>
我的 CSS 代碼：
a {
display: inline-block;
width: 11%;
text-decoration: none;
color: #333;
}
#uno:focus ~ hr {
margin-left: 140px;
}
#dos:focus ~ hr {
margin-left: 22.1% !important;
width: 10.3% !important;
}
hr {
height: 0.2rem;
width: 6.5%;
margin-left: 140px ;
margin-top: 0;
background: #d9534f;
border: none;
transition: 0.3s ease-in-out;
}
uj5u.com熱心網友回復：
我做了這樣的事情，它奏效了。玩弄左邊距，用 0 啟動左邊距，然后在單擊第二個鏈接時將其移動 100 像素，并在單擊第一個鏈接時將其移回 0。 密碼箱
hr {
height: 0.2rem;
width: 6.5%;
margin-left: 0;
margin-top: 0;
background: #d9534f;
border: none;
transition: 0.3s ease-in-out;
}
#two:focus ~ hr {
margin-left: 100px;
}
#one:focus ~ hr {
margin-left: 0px;
}
uj5u.com熱心網友回復：
我建議您使用background-image: linear-gradient()而不是使用hr更容易的標簽。
a {
width: 11%;
text-decoration: none;
color: #333;
display: inline-block;
background-image: linear-gradient( #d9534f, #d9534f);
background-repeat: no-repeat;
background-position: bottom left;
background-size: 0% 4px;
cursor:pointer;
}
.one:active{
background-size:50% 4px;
}
.two:active{
background-size:100% 5px;
}<nav>
<a style="margin-left: 140px;" routerLink="totalUsers" routerLinkActive="active" id="uno" class="one">
Total Users
</a>
<a routerLink="usersInformation" routerLinkActive="active" id="dos" class="two">
Users Information
</a>
</nav>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/406944.html
標籤：
上一篇：如何正確使用div
下一篇：如何將文本放入svg波浪中