CSS

Question

作为新手，现在 HTML 和 CSS，我运行陷入困境！我有一个 NavBar 但是当 我将鼠标悬停在它上面时 并转到 下一个栏 （当它悬停时), 我想添加一些东西，比如一个滑块，所以当你悬停在下一个 bar/section, 它会顺利进入下一个，而不是一动不动！你能帮我吗？太感谢了：） PS: 我只想在 HTML 和 CSS 上执行此操作 我不知道任何 JS，如果可以完成，将超级有用 以供将来参考！下面是我的完整代码！运行它在您的 编辑器 上，以便更好地理解！ :D HTML:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      src="https://kit.fontawesome.com/0c0d062607.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" type="text/css" href="Styles/style.css" />
    <title>My Page</title>
  </head>
  <body>
    <header>
      <div class="topnav">
        <a class="active" href="#home"
          ><i class="fa-solid fa-house"></i> Home</a
        >
        <a href="portfolio.html"
          ><i class="fa-solid fa-wallet"></i> Portfolio</a
        >
        <a href="contact.html"
          ><i class="fa-regular fa-circle-user"></i> Contact</a
        >
        <a href="about.html"><i class="fa-regular fa-comment"></i> About</a>
        <a href="index.html" id="logo">BESMART &nbsp; INDUSTRIES</a>
        <div class="social">
          <a
            class="facebook"
            href="https://facebook.com"
            target="_blank"
            title="Facebook"
            ><i class="fa-brands fa-facebook"></i>&nbsp Facebook</a
          >
          <a
            class="instagram"
            href="https://instagram.com"
            target="_blank"
            title="Instagram"
            ><i class="fa-brands fa-instagram"></i>&nbsp Instagram</a
          >
          <a
            class="twitter"
            href="https://twitter.com"
            target="_blank"
            title="Twitter"
            id="twitter"
            ><i class="fa-brands fa-twitter"></i>&nbsp Twitter</a
          >
        </div>
      </div>
    </header>

    <main>
      <p id="lorem1">Hello and Welcome to <a href="index.html" id="footerdesc"><em>BESMART INDUSTRIES</em></a>.</p>
      <p id="lorem1">We are so pleased to see you here!</p>

    </main>

    <footer>
      <div class="footer">
        <p id="footerdesc">
          Made with love by >
          <a href="index.html" id="footerdesc"><em>BE'SMART INDUSTRIES</em></a>
          <
        </p>
      </div>
    </footer>
  </body>
</html>

CSS:

    body {
  background-image: url(../images/index_bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.topnav {
  background-color: black;
  overflow: hidden;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-top: 3px solid rgb(32, 236, 255);
  border-bottom: 3px solid rgb(32, 236, 255);
  outline: none;
  border-color: rgb(32, 236, 255);
  box-shadow: 0 0 10px rgb(32, 236, 255);
}

.topnav a {
  float: left;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  color: rgb(32, 236, 255);
  text-align: center;
  padding: 11px 15px;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
}

.topnav a:hover {
  background-color: rgba(32, 236, 255);
  color: rgb(0, 0, 0);
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

.topnav a.active {
  background-color: rgb(32, 236, 255);
  color: white;
  text-shadow: 0px 0px 10px black;
  border-bottom-right-radius: 25px;
}

#logo {
  font-family: "Playball";
  position: absolute;
  left: 43%;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

.social {
  float: right;
}

#lorem1 {
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: left;
  margin-right: 930px;
  padding: 2px 2px 0px 2px; 
  border: 3px solid black;
  border-radius: 10px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

.footer {
  position: fixed;
  bottom: 3px;
  left: 8px;
  right: 8px;
  text-align: center;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  background-color: black;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top: 3px solid rgb(32, 236, 255);
  border-bottom: 3px solid rgb(32, 236, 255);
  outline: none;
  border-color: rgb(32, 236, 255);
  box-shadow: 0 0 10px rgb(32, 236, 255);
}

#footerdesc a:hover {
  background-color: rgb(5, 152, 172);
  color: black;
  border-top-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

#footerdesc {
  text-decoration: none;
  color: cyan;
}

Answer 1

如果您添加到 .topnav a:hover transition:linear 0.8s; 这会给导航栏带来效果。希望这对你有用。或者您可以添加 transition:ease 0.8s.

CSS - NAVBAR 悬停时滑动到下一个栏

CSS - NAVBAR Slide To Next Bar When Hover

html

slider

navbar