如何在ul li標簽上制作hover效果

Question

我正在嘗試為我的導航欄鏈接制作 hover 效果，當它們懸停時，邊框底線會對其進行動畫處理。我嘗試過使用它：

li:hover a {
box-sizing: border-box;
width: 100%;
border: solid #F5F5F5 5px;
padding: 5px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
}

這部分有效，懸停時出現底線（顯然沒有 animation 因為我還沒有做那部分）。 問題是，當它們懸停時，不僅會出現底部邊框，而且所有選項都會移動，就像邊框底部導致整個導航欄向相反方向移動每個鏈接一樣，就像他們試圖彼此保持距離。 我該如何解決這個問題？ 我將留下導航欄的 HTML 代碼和一些 css 代碼：

HTML：

    <ul class="nav-links">
    <li><a href="">HOME</a></a></li>
    <li><a href="">PORTFOLIO</a></a></li>
    <li><a href="">SUBMIT</a></a></li>
    <li><a href="">CONTACT</a></a></li>
    <li><a href="">ABOUT</a></a></li>
    </ul>

CSS：

* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}

body {
background-color: #900c3f;
}

img {
width: 130px;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 20px;
}

nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #ff5733;
}

li:hover a {
box-sizing: border-box;
width: 100%;
border: solid #F5F5F5 5px;
padding: 5px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
}

.nav-links {
display: flex;
justify-content: space-around;
width: 80%;
}

.nav-links li {
list-style: none;
}

.nav-links a {
text-decoration: none;
font-family: Poppins;
color: #F5F5F5;
letter-spacing: 3px;
font-weight: bold;
font-size: 130%;
}

是否應該將任何 div 添加到導航欄？ 或者我在做什么沒有意義？ 我還在學習，所以我可能會弄得一團糟。

這是一個屏幕截圖以防萬一：

懸停導航欄的屏幕截圖

感謝社區！

Answer 1

這是你問的嗎？ （您必須全屏查看才能獲得良好的可視化效果）

 * { margin: 0px; padding: 0px; box-sizing: border-box; } body { background-color: #900c3f; } img { width: 130px; margin-top: 20px; margin-left: 20px; margin-bottom: 20px; }.nav-links { display: flex; justify-content: space-between; width: 80%; }.nav-links li { list-style: none; }.nav-links a { text-decoration: none; font-family: Poppins; color: #F5F5F5; letter-spacing: 3px; font-weight: bold; font-size: 130%; margin: 10px; }.nav-links li a:hover { border-bottom: 5px solid white; padding-bottom: 3px; }

 <ul class="nav-links"> <li><a href="">HOME</a></li> <li><a href="">PORTFOLIO</a></li> <li><a href="">SUBMIT</a></li> <li><a href="">CONTACT</a></li> <li><a href="">ABOUT</a></li> </ul>

Answer 2

添加

li a {box-sizing: border-box;width: 100%;padding: 5px;border-top: 0px;border-bottom:0px;border-left: 0px;border-right: 0px;}

注意：加載時，顯示的是li a。 當 hover 時，激活 li:hover a