作为一名 HTML 和 CSS 新手，我遇到了问题! 我有一个导航栏，但是当我将鼠标悬停在其上并转到下一个栏(当其悬停时)， 我想添加一些东西，例如 slider ，因此当您将鼠标悬停到下一个栏/部分时， 它会顺利地转到下一个，而不仅仅是静态运动! 你能帮我解决这个问题吗？太感谢了 :) PS:我只想在HTML和CSS上执行此操作，并且我不知道任何JS，如果可以的话那就是 super 有帮助供将来引用! 下面是我的完整代码!在您的编辑器上运行它，以便更好地理解! :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 INDUSTRIES</a>
<div class="social">
<a
class="facebook"
href="https://facebook.com"
target="_blank"
title="Facebook"
><i class="fa-brands fa-facebook"></i>  Facebook</a
>
<a
class="instagram"
href="https://instagram.com"
target="_blank"
title="Instagram"
><i class="fa-brands fa-instagram"></i>  Instagram</a
>
<a
class="twitter"
href="https://twitter.com"
target="_blank"
title="Twitter"
id="twitter"
><i class="fa-brands fa-twitter"></i>  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;
}
最佳答案
如果添加到 .topnav a:hover transition:linear 0.8s; 这将为导航栏带来效果。希望这对你有用。或者您可以添加 transition:ease 0.8s。
关于html - CSS - NAVBAR 悬停时滑动到下一个栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71370217/