欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何在響應式導航條中修復下劃線文本懸停到遠處

CSS
李中冰2年前9瀏覽0評論

我試圖制作一個響應性的導航條，允許導航條在移動視圖中折疊和打開，但是當我試圖在移動視圖中打開導航條并將鼠標懸停在不同的鏈接上時，我的動畫在懸停時在文本下放置一條線似乎太長，與文本的長度不一致。但是在普通桌面視圖下工作良好。

問題的圖像

const menuIcon = document.querySelector("#menu-icon");
const navbar = document.querySelector(".navbar");

menuIcon.addEventListener("click", () => {
    menuIcon.classList.toggle("bx-x");
    navbar.classList.toggle("active");
});

* {
  color: white;
  text-align: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


.nav-link {
  font-weight: bold;
  text-decoration: none;
  color: white;
  padding: 20px 0px;
  margin: 0px 20px;
  display: inline-block;
  position: relative;
  opacity: 0.75;
}

.nav-link:hover {
  opacity: 1;
}

.nav-link::before {
  transition: 300ms;
  height: 3px;
  content: "";
  position: absolute;
  background-color: white;
}

.nav-link-ltr::before {
  width: 0%;
  bottom: 10px;
}

.nav-link-ltr:hover::before {
  width: 100%;
}


.lyrics {
  padding-top: 5%;
}



.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 100px;
  background: rgba(255,255,255,.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(10px);
  border-bottom: 2px solid rgba(255,255,255, .2);
  position: sticky; top:0;
}

.navbar a {
  font-size: 18px;
  text-decoration: none;
  margin-left: 35px;
  transition: .3s;
}

.navbar a:hover {
  -webkit-text-stroke: 1px white;
}

.container {
  display: inline-block;
  margin: 0 auto;
  padding-top: 15%;
}

.text {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 5px;
  border-right: 5px solid;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  animation:
    typing 2s steps(17),
    cursor .4s step-end infinite alternate;
}

/* cursor blinking effect */
@keyframes cursor {
  50% { border-color: transparent; }
}

/* Typewriter effect */
@keyframes typing {
  from { width: 0 }
}

#menu-icon {
  font-size: 36px;
  color: white;
  display: none;
}

@media (max-width: 992px) {
  .header {
    padding: 1.25rem 4%;
  }
}

@media (max-width: 768px) {
  #menu-icon {
    display:block;
  }

  .navbar {
    position:fixed;
    top: 100%;
    left: 0;
    width: 100%;
    padding: .5rem 4%;
    background:rgba(255,255,255, .1);
    border-bottom: 2px solid rgba(255,255,255, .2);
    display: none;
  }

  .navbar.active {
    display: block;
  }

  .navbar a {
    display: block;
    margin: 1.5rem 0;
  }
}

<link  rel='stylesheet'>
    
    <header class="header">
        <a href="#" class="logo">Matt</a>

        <i class="bx bx-menu" id="menu-icon"></i>

        <nav class="navbar">
            <a class="nav-link nav-link-ltr" href="#">Home</a>
            <a class="nav-link nav-link-ltr" href="#">About</a>
            <a class="nav-link nav-link-ltr" href="#">Contact</a>
            <a class="nav-link nav-link-ltr" href="#">Projects</a>
        </nav>
    </header>


    <div class="container">
        <p class="text">Hello, Matt Here.</p>
    </div>

    <div class="lyrics">
        <h3>Molly - Playboi Carti.</h3>
        <p>
            Look at these diamonds, they shinin' (Yeah)<br>
            Look at these bitches, they lyin' (Yeah)<br>
            Baby, these diamonds not Johnny (Yeah)<br>
            I just called up Avianne (Yeah)<br>
            I don't got no stylist (Yeah)<br>
            All my planes are privates<br>
            Perkys on the privates<br>
            We don't fuck with molly<br>
        </p>
    </div>

對于您的移動視圖，您設置了寬度:100%；在。navbar類，并將a鏈接從display:inline；(默認)顯示:block。因此，鏈接現在也占據了導航欄的100%寬度。最簡單快捷的解決方案是在鏈接中添加width屬性，并將其設置為fit-content。最后，要使文本再次居中，您還需要將鏈接的左/右邊距從0更改為auto。

所以改變這部分:

@media (max-width: 768px) {
    .navbar a {
        display: block;
        margin: 1.5rem 0;
    }
}

對此:

@media (max-width: 768px) {
    .navbar a {
        display: block;
        margin: 1.5rem auto;
        width: fit-content;
    }
}

最后，這里是一個工作片段:

const menuIcon = document.querySelector("#menu-icon");
const navbar = document.querySelector(".navbar");

menuIcon.addEventListener("click", () => {
    menuIcon.classList.toggle("bx-x");
    navbar.classList.toggle("active");
});

* {
  color: white;
  text-align: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body{
  background: blue;
}

.nav-link {
  font-weight: bold;
  text-decoration: none;
  color: white;
  padding: 20px 0px;
  margin: 0px 20px;
  display: inline-block;
  position: relative;
  opacity: 0.75;
}

.nav-link:hover {
  opacity: 1;
}

.nav-link::before {
  transition: 300ms;
  height: 3px;
  content: "";
  position: absolute;
  background-color: white;
}

.nav-link-ltr::before {
  width: 0%;
  bottom: 10px;
}

.nav-link-ltr:hover::before {
  width: 100%;
}


.lyrics {
  padding-top: 5%;
}



.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 100px;
  background: rgba(255,255,255,.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(10px);
  border-bottom: 2px solid rgba(255,255,255, .2);
  position: sticky; top:0;
}

.navbar a {
  font-size: 18px;
  text-decoration: none;
  margin-left: 35px;
  transition: .3s;
}

.navbar a:hover {
  -webkit-text-stroke: 1px white;
}

.container {
  display: inline-block;
  margin: 0 auto;
  padding-top: 15%;
}

.text {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 5px;
  border-right: 5px solid;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  animation:
    typing 2s steps(17),
    cursor .4s step-end infinite alternate;
}

/* cursor blinking effect */
@keyframes cursor {
  50% { border-color: transparent; }
}

/* Typewriter effect */
@keyframes typing {
  from { width: 0 }
}

#menu-icon {
  font-size: 36px;
  color: white;
  display: none;
}

@media (max-width: 992px) {
  .header {
    padding: 1.25rem 4%;
  }
}

@media (max-width: 768px) {
  #menu-icon {
    display:block;
  }

  .navbar {
    position:fixed;
    top: 100%;
    left: 0;
    width: 100%;
    padding: .5rem 4%;
    background:rgba(255,255,255, .1);
    border-bottom: 2px solid rgba(255,255,255, .2);
    display: none;
  }

  .navbar.active {
    display: block;
  }

  .navbar a {
    display: block;
    margin: 1.5rem auto;
    width: fit-content;
  }
}

<link  rel='stylesheet'>
<header class="header">
        <a href="#" class="logo">Matt</a>

        <i class="bx bx-menu" id="menu-icon"></i>

        <nav class="navbar">
            <a class="nav-link nav-link-ltr" href="#">Home</a>
            <a class="nav-link nav-link-ltr" href="#">About</a>
            <a class="nav-link nav-link-ltr" href="#">Contact</a>
            <a class="nav-link nav-link-ltr" href="#">Projects</a>
        </nav>
    </header>


    <div class="container">
        <p class="text">Hello, Matt Here.</p>
    </div>

    <div class="lyrics">
        <h3>Molly - Playboi Carti.</h3>
        <p>
            Look at these diamonds, they shinin' (Yeah)<br>
            Look at these bitches, they lyin' (Yeah)<br>
            Baby, these diamonds not Johnny (Yeah)<br>
            I just called up Avianne (Yeah)<br>
            I don't got no stylist (Yeah)<br>
            All my planes are privates<br>
            Perkys on the privates<br>
            We don't fuck with molly<br>
        </p>
    </div>