CSS导航菜单淡出关闭悬停

Question

我还在学习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>

Fiddle

我只想要一个简单的淡出，而不希望希望过多地改变我的结构并保持CSS。

感谢您的帮助！

Answer 1

只使用过渡就可以实现良好的淡入/淡出效果。我就是这样做的

.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

Answer 2

娜塔莉是绝对正确的，过渡是这样做的方式。

需要更改的唯一位是/*Drop Down Container*/和/*Drop Down On Hover Action*/

的CSS

不是隐藏带有display: none;的div，而是将其隐藏opacity: 0;，然后设置不透明度转换。 显示它们所需要做的就是将opacity: 1;置于悬停状态，它们会很好地淡入淡出。

为了让它们在没有它们的情况下使用，当鼠标经过菜单下方时，你需要将它们的高度，填充和边框设置为0，然后将它们作为悬停状态的一部分应用。

（如果需要不同的边框样式，可以使用.navMain，.navMain1等单独悬停）

您还可以删除底部的所有关键帧。

新CSS：

/*Drop Down On Hover Action*/

.nav > li:hover > div {
    opacity: 1;
    height: 300px;
    padding: 10px 10px;
    border:1px solid #777777; // removed borders from .navMain, .navMain1 etc
    border: 1px solid black;
}

/*Drop Down Container*/

.nav > li > div {
    position: fixed;
    left: 0;        // added the left: 0; here
    top: 337px;
    height: 0;  // height: 0 when not hovered
    opacity: 0;             // swapped for display:none;
    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;
    -webkit-transition: opacity .5s ease-in-out; 
    -moz-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s  ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}

Updated Fiddle

Answer 3

根据杰克逊的回答，下面是使用转换延迟来达到效果的一个例子。

此方法在某些方面更简单，因为您不必将所有填充/边框设置移动到悬停状态。相反，当你没有悬停时，你将div移动到远离左边的位置，然后在悬停状态下设置left: 0;。

转换必须设置两次（一次用于悬停，一次用于关闭）因为你希望left: 0;在悬停时立即生效并等到不透明度转换后再移回。

转换的完整语法是transition: <property> <duration> <style: ease> <delay: 0s>

/*Drop Down On Hover Action*/

.nav > li:hover > div {
    opacity: 1;
    left: 0;
    -webkit-transition: opacity .5s ease-in-out; 
    -moz-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s  ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}

/*Drop Down Container*/

.nav > li > div {
    position: fixed;
    left: -9999em; 
    top: 337px;
    opacity: 0;     
    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;
    -webkit-transition: opacity .5s ease-in-out, left .5s ease .5s; 
    -moz-transition: opacity .5s ease-in-out, left .5s ease .5s;
    -ms-transition: opacity .5s  ease-in-out, left .5s ease .5s;
    -o-transition: opacity .5s ease-in-out, left .5s ease .5s;
    transition: opacity .5s ease-in-out, left .5s ease .5s;
}

Updated Fiddle