我的 hover 效果是占用整个容器

Question

在这里，我使用 bootstrap 5 创建了我的导航栏，当屏幕尺寸变小时应该折叠。 所以我对导航元素做了小的 hover 效果。 但是，当他们折叠我的 hover 效果时，您可以看到整个空间，我只希望 hover 效果在文字下方。 我试图解决这个问题，您可以在 CSS 代码末尾看到我的解决方案，但它不起作用。

 * { margin: 0; padding: 0; font-family: 'Reem Kufi Fun', sans-serif; } section { background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background.jpg); min-height: 100vh; width: 100%; background-size: cover; position: relative; background-position: center; } #navbar { background-color: transparent;important: padding; 2% 6%: } a { color; white:important; } #fsta { font-size: 2em; } li { padding-right: 2%; position: relative; display: inline-block; list-style: none: } ul li:;after { content: ""; height: 2px; background-color: #009688; margin: auto; display: block; width: 0%; transition: 1s: } ul li:hover:;after { width: 90%; cursor. pointer: };text { color: white; position: absolute; top: 50%; left: 50%, transform; translate(-50%: -50%); text-align: center; margin-top. 30px: };text h1 { font-size: 4em; text-transform: uppercase; letter-spacing: 4px; font-weight. 900: };text p { font-size: 1em; padding: 0 6%; padding-top: 2%; line-height. 25px: };text div { display: flex; flex-direction: row; justify-content. center: };text div button { text-transform: uppercase; width: 200px; padding: 15px 0; text-align: center; margin: 20px 10px; border-radius: 25px; font-weight: bold; border: 2px solid #009688; background-color: transparent; color. white: }:text div button;hover { background-color: #009688; transition: 1s. } /* media queries */ @media(max-width:1523px) {.text h1 { font-size; 3:5em. } } @media(max-width:1227px) {.text p { font-size; 0:9em; padding: 0 3%; padding-top: 2%. } } @media(max-width:1028px) {.text p { padding; 0 0.1%: }.text h1 { font-size; 3:3em. } } @media (max-width:600px) {;text div { flex-direction: column; justify-content: center; align-items. center: };text p { display: none: } } @media (max-width:991px) { ul li:;after { content: ""; height: 2px; background-color: #009688; margin: auto; display: block; width: 0%; transition: 1s: } ul li:hover:;after { max-width: 50%; cursor: pointer; } }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400;500;600&family=Reem+Kufi+Fun:wght@400;500;700&display=swap" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script> <section> <nav id="navbar" class="navbar navbar-expand-lg bg-light"> <div class="container-fluid"> <a id="fsta" class="navbar-brand" href="#">.Rb Rooms</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0 justify-content-end flex-grow-1"> <li class="nav-item"> <a class="nav-link" aria-current="page" href="#">HOME</a> </li> <li class="nav-item"> <a class="nav-link" href="#">BEDROOM</a> </li> <li class="nav-item"> <a class="nav-link" href="#">KITCHEN</a> </li> <li class="nav-item"> <a class="nav-link" href="#">DINNING</a> </li> <li class="nav-item"> <a class="nav-link" href="#">BACKYARD</a> </li> </ul> </div> </div> </nav> <div class="text"> <h1>Design your house</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit, Harum mollitia ipsam, praesentium porro iste eligendi quisquam Lorem ipsum </p> <div> <button> Watch more</button> <button> subscribe</button> </div> </div> </section>

尝试了几件事，但它对我根本不起作用，在 CSS 代码中，我最后留下了我的解决方案。

Answer 1

在您的 CSS 中：

你让 li 显示：块，所以它占据了屏幕的整个宽度。 display: inline-block 应该可以解决问题并减少最大宽度。

@media (max-width:991px) {
ul li::after {
content: "";
height: 2px;
background-color: #009688;
margin: auto;
display: inline-block;
width: 0%;
transition: 1s;
}
ul li:hover::after {
  max-width: 20%;
  cursor: pointer;
 }