CSS - NAVBAR 在 Hover 時滑動到下一個欄

Question

作為HTML和CSS的新手，我遇到了一個問題！ 我有一個NavBar但是當我 Hover和 go 到下一個欄（懸停時）時，我想添加類似slider 的東西，所以當你懸停到下一個欄/部分時，它將go 到下一個順利而不僅僅是 static 運動？ 你能幫我嗎：非常感謝:) 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 在 Hover 時滑動到下一個欄

問題描述

1 個解決方案

解決方案1
2 已采納 2022-03-06 13:03:28

CSS - NAVBAR 在 Hover 時滑動到下一個欄

問題描述

1 個解決方案

解決方案1 2 已采納 2022-03-06 13:03:28

解決方案1
2 已采納 2022-03-06 13:03:28