Question

在下拉菜单中设置淡入淡出有点奇怪的问题 - 这是我的CSS：

.main-navigation li ul li { 
 opacity:0; 
 transition:opacity 0.3s linear; 
 -webkit-transition:opacity 0.3s linear; 
 -moz-transition:opacity 0.3s linear; 
 -o-transition:opacity 0.3s linear; 
}

.main-navigation li:hover > ul li { 
     opacity:1; 
}

HTML（通过WP生成）：

<nav id="site-navigation" class="main-navigation" role="navigation">
            <h3 class="menu-toggle">Menu</h3>
            <a class="assistive-text" href="#content" title="Skip to content">Skip to content</a>
            <div class="menu-nav-container"><ul id="menu-nav" class="nav-menu"><li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-10 current_page_item menu-item-23"></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"></li>
<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-24">
<ul class="sub-menu">
    <li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48"></li>
    <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"></li>
    <li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69"></li>
</ul>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-27">
<ul class="sub-menu">
    <li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66"></li>
    <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"></li>
    <li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64"></li>
</ul>
</li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-28">
<ul class="sub-menu">
    <li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-63"></li>
    <li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62"></li>
    <li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"></li>
</ul>
</li>
</ul></div>

当您滚动列表项时，子列表会正确淡入，但问题是：当您滚动它们所在的区域时，它们也会淡入。我似乎无法解决它 - 任何人都有任何想法？

谢谢！

Answer 1

.main-navigation li > ul {
 display:none;
}

.main-navigation li:hover > ul {
 display:initial;
}

可能就是你想要的。

Answer 2

将不透明度设置为0的元素仍占用页面上的空间（除非您将它们放置或浮动它们），因此当您将鼠标悬停在子导航上时，您实际上是在父<li>上悬停要运行的动画。

使用visibility: hidden和position: absolute解决此问题有一个技巧。作为一个额外的好处，因为visibility属性允许使用过渡（display没有），你可以通过设置延迟来制作平滑的淡出效果以及淡入淡出。

我会在子导航<ul>而不是子导航<li>上设置样式。

.main-navigation li ul { 
  position: absolute; /* Take it out of the document flow */
  visibility:hidden;
  opacity:0;
  transition:visibility 0s linear 0.3s, opacity 0.3s linear;
}

.main-navigation li:hover > ul { 
  visibility:visible;
  opacity:1;
  transition-delay:0s;
}

可见性转换延迟与不透明度转换长度的长度匹配，这意味着当您停止悬停时，在不透明度完成动画处理之前不会发生可见性。

<强> Demo

CSS下拉菜单不正确地淡入淡出

2 个答案: