我还在学习 CSS 样式，我想实现一个淡入/淡出导航菜单。仔细阅读，我能够成功地将悬停时的淡入编码到我想要的效果。现在，我在逻辑上受到了挑战，似乎无法想出如何编写该菜单的代码，使其在鼠标不再悬停在该特定类上时淡出。
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: grey;
}
body {
position: fixed;
font-family: Serif, sans-serif;
background: white;
font-size: 62.5%;
color: black;
}
/*Nav Wrapper*/
#navWrapper {
width: 1100px;
position: fixed;
top: 30px;
left: 0px;
right: 0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
}
/*Banner Wrapper*/
.bannerWrap {
width: 1100px;
position: fixed;
left: 0px;
right: 0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
}
/*Banner Styling*/
.banner {
border: 1px solid black;
}
/*Main Nav Box Styling*/
.nav {
position: fixed;
list-style: none;
width: 1102px;
top: 70px;
margin: 30px auto 0px auto;
height: 43px;
padding: 0px 20px 0px 20px;
background: #323552;
background: -moz-linear-gradient(top, #323552, #1a1b24);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#323552), to(#1a1b24));
border: 1px solid #002232;
}
/*Main Nav Button Styling*/
.nav li {
float: left;
text-align: center;
position: relative;
padding: 4px 10px 4px 10px;
margin-right: 30px;
margin-top: 7px;
border: none;
background-color: transparent;
}
/*Main Nav Button Styling*/
.nav > li > a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #EEEEEE;
display: block;
outline: 0;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;
background-color: transparent;
}
/*Drop Down On Hover Action*/
.nav > li:hover > div {
display: block;
left: 0;
-webkit-animation: fadein .5s;
/* Safari and Chrome */
-moz-animation: fadein .5s;
/* Firefox */
-ms-animation: fadein .5s;
/* Internet Explorer */
-o-animation: fadein .5s;
/* Opera */
animation: fadein .5s;
}
/*Drop Down Container*/
.nav > li > div {
position: fixed;
right: -1px;
top: 147px;
height: 300px;
display: none;
padding: 10px 10px;
box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.4);
background: #323552;
background: -moz-linear-gradient(top, #323552, #1a1b24);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#323552), to(#1a1b24));
overflow: hidden;
}
/*Drop Down*/
.navMain {
margin: -4px auto;
position: fixed;
text-align: left;
border: 1px solid #777777;
border-top: none;
width: 1060px;
border: 1px solid black;
}
/*Nav Text Styling*/
.dropContent {
background: transparent;
color: #b9b9b9;
}
/*Nav Text Styling*/
.nav-titles {
display: inline-block;
font-size: 1.2em;
font-weight: bold;
text-align: left;
padding-right: 3px;
background: transparent;
}
/*Nav Icons Styling*/
.navIcon {
width: 15px;
height: 15px;
background: transparent;
}
/*Nav Sub Menu*/
.navDropLinks {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
display: block;
padding-bottom: 6px;
background: transparent;
}
/*Nav Sub Menu Hyper*/
.navDropLinks > a {
color: black;
text-decoration: none;
font-weight: bold;
background: transparent;
}
/*Nav Sub Menu Left Column*/
.navLeft {
position: absolute;
left: 10px;
width: 330px;
display: inline-block;
font-size: 11px;
text-align: left;
padding-right: 3px;
background: transparent;
}
/*Nav Sub Menu Center Column*/
.navCenter {
position: absolute;
width: 330px;
left: 357px;
font-size: 11px;
text-align: center;
background: transparent;
}
/*Nav Sub Menu Right Column*/
.navRight {
position: absolute;
right: 10px;
width: 330px;
display: inline-block;
font-size: 11px;
text-align: center;
padding-left: 3px;
background: transparent;
}
/*Nav Sub Menu Focus Images*/
.navImage {
display: inline-block;
width: 275px;
height: 120px;
background: transparent;
}
/*Alt Nav Sub Menus*/
.navMain1 {
margin: -4px auto;
position: fixed;
text-align: left;
border: 1px solid #777777;
border-top: none;
width: 1060px;
/* Gradient background */
background: #F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
border: 1px solid black;
}
/*Alt Nav Sub Menus*/
.navMain2 {
margin: -4px auto;
position: fixed;
text-align: left;
border: 1px solid #777777;
border-top: none;
width: 1060px;
/* Gradient background */
background: #F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
border: 1px solid black;
}
/*To Line 270: Keyframes for Nav Animation*/
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Firefox */
@-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Safari and Chrome */
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
@-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Opera */
@-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-moz-keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-o-keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}<!--Nav Wrapper-->
<div class="bannerWrap">
<img class="banner" src="images/general/site/bannerlg.png">
</div>
<div id="navWrapper">
<ul class="nav">
<li><a href="#">Final Cut</a>
<!--Begin Main Div-->
<div class="navMain">
<!--Begin Sub Nav-->
<div class="navLeft"> <span class="nav-titles">DBZ Final Cut: Navi</span>
<br>
<br>
<br>
<div class="navDropLinks">
<img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Home</a>
</div>
<div class="navDropLinks">
<img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Archived News</a>
</div>
<div class="navDropLinks">
<img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> About Us</a>
</div>
<div class="navDropLinks">
<img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Contact Us</a>
</div>
<br>
<br><span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.</span>
</div>
<!--End Sub Nav-->
<!--Begin Nav Center-->
<div class="navCenter"> <span class="nav-titles">Latest News</span>
<br>
<img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
<br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
</span>
</div>
<!--End of Nav Center-->
<!--Begin Nav Right-->
<div class="navRight"> <span class="nav-titles">Latest News</span>
<br>
<img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
<br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
</span>
</div>
<!--End Nave Right-->
</div>
<!--End Main Div-->
</li>
<li><a href="#">News</a>
<!--Begin Main Div-->
<div class="navMain1">
<!--Begin Sub Nav-->
<div class="navLeft"> <span class="nav-titles">DBZ Final Cut: Navi</span>
<br>
<br>
<br>
<div class="navDropLinks">
<img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Home</a>
</div>
<div class="navDropLinks">
<img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Archived News</a>
</div>
<div class="navDropLinks">
<img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> About Us</a>
</div>
<div class="navDropLinks">
<img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Contact Us</a>
</div>
<br>
<br><span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.</span>
</div>
<!--End Sub Nav-->
<!--Begin Nav Center-->
<div class="navCenter"> <span class="nav-titles">Latest News</span>
<br>
<img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
<br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
</span>
</div>
<!--End of Nav Center-->
<!--Begin Nav Right-->
<div class="navRight"> <span class="nav-titles">Latest News</span>
<br>
<img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
<br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
</span>
</div>
<!--End Nav Right-->
<!--End Main Div-->
</li>
<li><a href="#">Articles</a>
<!--Begin Main Div-->
<div class="navMain2">
<!--Begin Sub Nav-->
<div class="navLeft"> <span class="nav-titles">DBZ Final Cut: Navi</span>
<br>
<br>
<br>
<div class="navDropLinks">
<img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Home</a>
</div>
<div class="navDropLinks">
<img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Archived News</a>
</div>
<div class="navDropLinks">
<img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> About Us</a>
</div>
<div class="navDropLinks">
<img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Contact Us</a>
</div>
<br>
<br><span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.</span>
</div>
<!--End Sub Nav-->
<!--Begin Nav Center-->
<div class="navCenter"> <span class="nav-titles">Latest News</span>
<br>
<img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
<br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
</span>
</div>
<!--End of Nav Center-->
<!--Begin Nav Right-->
<div class="navRight"> <span class="nav-titles">Latest News</span>
<br>
<img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
<br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
</span>
</div>
<!--End Nav Right-->
<!--End Main Div-->
</li>
<li><a href="#">Sets</a>
<!--Begin Main Div-->
<div class="navMain1">
<!--Begin Sub Nav-->
<div class="navLeft"> <span class="nav-titles">DBZ Final Cut: Navi</span>
<br>
<br>
<br>
<div class="navDropLinks">
<img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Home</a>
</div>
<div class="navDropLinks">
<img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Archived News</a>
</div>
<div class="navDropLinks">
<img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> About Us</a>
</div>
<div class="navDropLinks">
<img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Contact Us</a>
</div>
<br>
<br><span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.</span>
</div>
<!--End Sub Nav-->
<!--Begin Nav Center-->
<div class="navCenter"> <span class="nav-titles">Latest News</span>
<br>
<img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
<br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
</span>
</div>
<!--End of Nav Center-->
<!--Begin Nav Right-->
<div class="navRight"> <span class="nav-titles">Latest News</span>
<br>
<img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
<br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
</span>
</div>
<!--End Nav Right-->
<!--End Main Div-->
</li>
<li><a href="#">Resources</a>
<!--Begin Main Div-->
<div class="navMain1">
<!--Begin Sub Nav-->
<div class="navLeft"> <span class="nav-titles">DBZ Final Cut: Navi</span>
<br>
<br>
<br>
<div class="navDropLinks">
<img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Home</a>
</div>
<div class="navDropLinks">
<img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Archived News</a>
</div>
<div class="navDropLinks">
<img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> About Us</a>
</div>
<div class="navDropLinks">
<img class="navIcon" src="images/general/site/4staricon.png"><a href="#"> Contact Us</a>
</div>
<br>
<br><span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.</span>
</div>
<!--End Sub Nav-->
<!--Begin Nav Center-->
<div class="navCenter"> <span class="nav-titles">Latest News</span>
<br>
<img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
<br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
</span>
</div>
<!--End of Nav Center-->
<!--Begin Nav Right-->
<div class="navRight"> <span class="nav-titles">Latest News</span>
<br>
<img class="navImage" src="images/general/setsellsheets/mc.jpg" alt="article image" />
<br> <span class="dropContent">This is some random text that is describing the current article. The picture above will relate to the article. This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.This is filler text.
</span>
</div>
<!--End Nav Right-->
<!--End Main Div-->
</li>
</ul>
<!--End Nav List-->
</div>我只是想要一个简单的淡出效果，希望不必过多地改变我的结构并与 CSS 保持一致。
感谢您的帮助!
最佳答案
您可以仅使用过渡来实现良好的淡入/淡出效果。我是这样做的
.sub-menu {
position: absolute;
left: -9999em;
width: 200px;
background-color: #eee;
opacity: 0;
transition: left 0.5s ease 0.5s, opacity 0.5s ease; /* Transition on left position */
}
.main-nav li:hover .sub-menu {
left: 0;
opacity: 1;
transition: opacity 0.5s ease; /* No transition on left position when hovering */
}
如果使用 left: -9999em 定位子菜单使其离开屏幕，然后对该属性应用过渡延迟，以便它首先淡出，然后在不可见时移出屏幕。
但是当悬停状态被激活时，您将需要放置另一个转换来覆盖它。这将防止位置属性在悬停时动画
看看这个jsFiddle
关于html - CSS 导航菜单淡出 OFF 悬停，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30862681/