html - 如何实现导航元素的过渡效果?
问题描述
我正在尝试使我的导航部分更好一些。目前,当我将鼠标悬停在菜单项上以显示其中的页面时,页面会立即显示。我希望它们逐渐出现,而不是一下子出现。我试过在我的 CSS 文件transition: 2s;
下面添加nav ul li:hover ul
,但这似乎不起作用。
header {
color: #348899;
background-color: #343642;
background-image: url(Images/heading.png);
background-position: right;
background-repeat: no-repeat;
}
#wrapper {
width: 90%;
margin-right: auto;
margin-left: auto;
}
h1 {
margin: 0;
padding: 10px;
font-size: 42pt;
line-height: 36pt;
font-weight: lighter;
}
h2 {
margin: 0;
padding: 0 10px 5px;
font-size: 18pt;
line-height: 22pt;
font-weight: bold;
font-style: italic;
}
h3 {
margin: 0;
padding: 0 10px 5px 0;
font-size: 18pt;
line-height: 22pt;
font-weight: bold;
font-style: italic;
}
nav {
color: #343642;
background-color: #979C9C;
float: left;
width: 160px;
font-weight: bold;
height: 100%;
position: relative;
}
nav ul li {
list-style: none;
padding: 10px;
}
nav ul li a {
display: block;
text-decoration: none;
color: #343642;
}
nav ul li ul {
display: none;
position: relative;
left: auto;
right: 35%;
}
nav ul li:hover ul {
display: block;
transition: 2s;
}
nav ul li ul li:hover {
background-color: #b1b6b6;
width: 80px;
}
nav ul li ul li a:hover {
color: #fff;
}
nav ul li a:hover {
color: #fff;
background-color: #b1b6b6;
}
main {
color: #17354A;
background-color: #F2EBC7;
margin-left: 160px;
padding: 10px;
z-index: 0;
display: flex;
}
.column {
float: left;
}
.left {
width: 75%;
}
.right {
width: 25%;
}
.text {
font-size: 25px;
margin: 0 20px 0 0;
}
main .row .left {
width: 25%;
}
main .row .left p {
margin-right: 5px;
}
main .row .middle {
width: 50%;
}
main .row .middle h3 {
text-align: center;
}
main .row .right {
width: 25%;
}
main .side .left {
width: 50%;
}
main .side .right {
width: 50%;
}
.brass {
float: right;
margin: 0 0 5px 5px;
}
.logo {
float: right;
margin: 0 0 5px 5px;
}
body{
background-color: #348899;
font-family: Calibri, Helvetica, Arial, Sans-Serif;
}
footer {
color: #348899;
background-color: #343642;
font-style: italic;
text-align: center;
margin-left: 160px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="project.css">
<meta charset="utf-8" />
<title>Beginning Band Players - Home</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>
Beginning Band Players
</h1>
<h2>
Home
</h2>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Brass</a>
<ul>
<li><a href="Brass/trumpet.html">Trumpet</a></li>
<li><a href="Brass/frenchhorn.html">Horn</a></li>
<li><a href="Brass/trombone.html">Trombone</a></li>
<li><a href="Brass/euphonium.html">Euphonium</a></li>
<li><a href="Brass/tuba.html">Tuba</a></li>
</ul>
</li>
<li><a href="#">Woodwind</a>
<ul>
<li><a href="Woodwind/clarinet.html">Clarinet</a></li>
<li><a href="Woodwind/flute.html">Flute</a></li>
<li><a href="Woodwind/oboe.html">Oboe</a></li>
<li><a href="Woodwind/saxophone.html">Saxophone</a></li>
</ul>
</li>
<li><a href="#">Percussion</a>
<ul>
<li><a href="Percussion/bells.html">Bells</a></li>
<li><a href="Percussion/snare.html">Snare Drum</a></li>
</ul>
</li>
<li><a href="misc/maintenence.html">Maintenence</a></li>
<li><a href="misc/additional-equipment.html">Additional Equipment</a></li>
</ul>
</nav>
<main>
<div class="column left">
<div class="logo">
<img src="Images/Logo-E.png" alt="logo" height="200" width="355">
</div>
<h3>
About us:
</h3>
<div class="text">
<p>
The purpose of Beginning Band Players is to provide students and parents
with the necessary resources for a successful start in any band program.
It's our hope that prospective music students find what they're looking
for and enjoy a lifetime of music.
</p>
<div class="brass">
<img src="Images/brass-1.jpg" alt="brass" height="238" width="425">
</div>
</div>
</div>
<div class="column right">
<h3>
What to Expect:
</h3>
<p>
Students can learn a little about each instrument found in beginning band
programs and decide which one they like best. They'll be able to see and
hear what each instrument sounds like.
</p>
<h3>
Additional Resources:
</h3>
<p>
Students may also need additional equipment such as practice books or supplies
to help maintain their instruments. Links to such supplies can be found on the
Additional Equipment page.
</p>
</div>
</main>
<footer>
Copyright © 2022, Carter Thomas Wolfe <br>
Web Project Prototype
</footer>
</div>
</body>
</html>
解决方案
您必须告诉 CSS 您想要转换哪个属性,以及您希望它如何转换。如果您将过渡线更改为以下内容:
transition: opacity 2s ease-in;
这就是说:使用“缓动”功能在 2 秒内淡化不透明度。https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function上面的那一行应该可以工作——但前提是它有不同的不透明状态可以在它们之间转换。元素默认不透明度为 1,因此仅定义不透明度的过渡是不够的,您还必须在不同的状态之间进行更改。如果您使用不透明度,我会尝试将元素/类/任何内容的默认状态设置为 0,并将悬停状态设置为 1。
.classYouWantToFadeIn {
opacity:0;
/*rest of the CSS*/
}
.classYouWantToFadeIn:hover {
opacity: 1;
}
如果转换似乎仍然不起作用,请阅读 CSS 中的“特异性规则”。https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
推荐阅读
- python - 使用 CSV 文件进行回归
- python - 基于另一列为所有行分配随机值
- sharepoint - 在 Power Automate 中对 Sharepoint 列表列进行分组
- css - Bootsrap.css 未加载到使用 PuppeteerSharp 生成的 pdf 中
- html - 为什么按钮边框没有显示我设置的颜色?
- excel - 使用模块级私有变量和子变量而不是使用 VBA for Excel 中的函数传递变量是否会影响性能?
- input - 如何在 Mac OS 中的不同进程或应用程序之间同步鼠标和键盘操作?
- java - 检查编辑框是否为空
- robotframework - 机器人框架 Telnet 库不打开终端
- r - 在 R 中按组用 NA 填充缺失的日期 - NA 也位于日期范围的末尾