如何在响应菜单上的导航链接上的悬停上设置下划线？

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> 

---