如何在響應菜單上的導航鏈接上的懸停上設置下划線？

Question

我已經為導航菜單上的懸停下划線編碼，效果很好。 但是，當我創建一個響應式導航菜單時，懸停時的下划線會覆蓋塊的整個寬度，而不是導航鏈接，就像瀏覽器大於600像素時一樣。

這是該網站 ，或者您可以參考以下代碼段。

任何幫助表示贊賞。

 function myFunction() { var x = document.getElementById("myNavbar"); if (x.className === "navbar") { x.className += " responsive"; } else { x.className = "navbar"; } } 

 @font-face { font-family: "Lyon"; src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf"); src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg"); } body { padding: 0; margin: 0; background: white; } * { box-sizing: border-box; } h1 { font-family: 'Lyon'; font-size: 24px; max-width: 800px; text-align: center; margin: auto; padding-top: 16px; padding-left: 16px; padding-right: 16px; } .navbar { z-index: 1; font-family: 'Lyon'; background-color: white; position: fixed; bottom: 0; width: 100%; border-top: .05rem solid; display: flex; justify-content: space-between; padding: 14px 16px; } .navbar a { color: black; font-family: 'Lyon'; font-size: 24px; text-align: center; text-decoration: none; position: relative; } .navbar a:hover { color: black; font-family: 'Lyon'; text-decoration: none; } .navbar a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .navbar a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } .navbar a.active { background-color: white; color: black; font-style: none; font-family: 'Lyon'; } .navbar .icon { display: none; } @media screen and (max-width: 600px) { .navbar a { display: none; padding-top: 6px; } .navbar a.icon { float: right; display: block; } .navbar.responsive .icon { position: absolute; left: 10px; top: 8px; } .navbar.responsive a { float; none; display: block; text-align: center; } .navbar.responsive { display: block; } .navbar.responsive a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .navbar.responsive a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } } p { margin: 10px 0; } 

 <div class="navbar" id="myNavbar"> <a href="#about" class="active">About</a> <a href="#lindsay">Lindsay</a> <a href="#contact">Branding</a> <a href="#contact">Photography</a> <a href="#contact">Instagram</a> <a href="javascript:void(0);" style="font-size:18px;" class="icon" onclick="myFunction()">i</a> </div> 

Answer 1

我檢查你的CSS和問題是a標簽具有的屬性display:block ，其擴展標記，因此，樣式應用於標簽本身，沒有任何的文字，所以，如果你想保留的空間時，顯示器是小，你應該每包a列表中的項目或在標簽div ，並通過它的屬性display:block

這是我說的例子

 function myFunction() { var x = document.getElementById("myNavbar"); if (x.className === "navbar") { x.className += " responsive"; } else { x.className = "navbar"; } } 

 @font-face { font-family: "Lyon"; src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf"); src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg"); } body { padding: 0; margin: 0; background: white; } * { box-sizing: border-box; } h1 { font-family: 'Lyon'; font-size: 24px; max-width: 800px; text-align: center; margin: auto; padding-top: 16px; padding-left: 16px; padding-right: 16px; } .navbar { z-index: 1; font-family: 'Lyon'; background-color: white; position: fixed; bottom: 0; width: 100%; border-top: .05rem solid; display: flex; justify-content: space-between; padding: 14px 16px; margin: 0; } .navbar a { color: black; font-family: 'Lyon'; font-size: 24px; text-align: center; text-decoration: none; position: relative; } .navbar a:hover { color: black; font-family: 'Lyon'; text-decoration: none; } .navbar li{ list-style:none; } .navbar a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .navbar a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } .navbar a.active { background-color: white; color: black; font-style: none; font-family: 'Lyon'; } .navbar .icon { display: none; } @media screen and (max-width: 600px) { .navbar a{ display: none; padding-top: 6px; } .navbar .icon { float: right; display: block; } .navbar.responsive .icon { position: absolute; left: 10px; top: 8px; } .navbar.responsive li a { float; none; display: inline; text-align: center; margin: 4px; } .navbar.responsive li { float; none; text-align: center; margin: 6px 00px; } .navbar.responsive { align-content: center; flex-flow:column; } .navbar.responsive li a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .navbar.responsive li a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } } 

 <ul class="navbar" id="myNavbar"> <a href="javascript:void(0);" style="font-size:18px;" class="icon" onclick="myFunction()">i</a> <li><a href="#about" class="active">About</a></li> <li><a href="#lindsay">Lindsay</a></li> <li><a href="#contact">Branding</a></li> <li><a href="#contact">Photography</a></li> <li><a href="#contact">Instagram</a></li> </ul> 

Answer 2

你期望這樣嗎

臨時解決方案

我剛剛添加了nth-child，並為每個鏈接設置了縮放比例。

 function myFunction() { var x = document.getElementById("myNavbar"); if (x.className === "navbar") { x.className += " responsive"; } else { x.className = "navbar"; } } 

 @font-face { font-family: "Lyon"; src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf"); src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg"); } body { padding: 0; margin: 0; background: white; } * { box-sizing: border-box; } h1 { font-family: 'Lyon'; font-size: 24px; max-width: 800px; text-align: center; margin: auto; padding-top: 16px; padding-left: 16px; padding-right: 16px; } .navbar { z-index: 1; font-family: 'Lyon'; background-color: white; position: fixed; bottom: 0; width: 100%; border-top: .05rem solid; display: flex; justify-content: space-between; padding: 14px 16px; } .navbar a { color: black; font-family: 'Lyon'; font-size: 24px; text-align: center; text-decoration: none; position: relative; } .navbar a:hover { color: black; font-family: 'Lyon'; text-decoration: none; } .navbar a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .navbar a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } .navbar a.active { background-color: white; color: black; font-style: none; font-family: 'Lyon'; } .navbar .icon { display: none; } @media screen and (max-width: 600px) { .navbar a { display: none; padding-top: 6px; } .navbar a.icon { float: right; display: block; } .navbar.responsive .icon { position: absolute; left: 10px; top: 8px; } .navbar.responsive a { float; none; display: block; text-align: center; } .navbar.responsive { display: block; } .navbar.responsive a:before { content: ""; position: absolute; height: 2px; width:100%; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .navbar.responsive a:hover:nth-child(1):before { visibility: visible; -webkit-transform: scaleX(.18); transform: scaleX(.18); } .navbar.responsive a:hover:nth-child(2):before { visibility: visible; -webkit-transform: scaleX(.22); transform: scaleX(.22); } .navbar.responsive a:hover:nth-child(3):before { visibility: visible; -webkit-transform: scaleX(.25); transform: scaleX(.25); } .navbar.responsive a:hover:nth-child(4):before { visibility: visible; -webkit-transform: scaleX(.33); transform: scaleX(.33); } .navbar.responsive a:hover:nth-child(5):before { visibility: visible; -webkit-transform: scaleX(.26); transform: scaleX(.26); } } p { margin: 10px 0; } 

 <div class="navbar" id="myNavbar"> <a href="#about" class="active">About</a> <a href="#lindsay">Lindsay</a> <a href="#contact">Branding</a> <a href="#contact">Photography</a> <a href="#contact">Instagram</a> <a href="javascript:void(0);" style="font-size:18px;" class="icon" onclick="myFunction()">i</a> </div> 

---