当菜单被访问时，CSS覆盖不能正常工作

Question

我有一个网站，在那里实现了一个CSS覆盖时，菜单被访问。这个覆盖在页面的其余部分逐渐淡入和淡出，但不是通过z-index菜单本身。鼠标悬停时，所有的效果都很好，覆盖层逐渐淡入，其余部分看起来很暗。

然而，当鼠标不再在菜单上时，覆盖的淡出是混乱的。叠加本身正确淡出，但所有的图像立即显示(不透明度1?)，这使得它看起来很奇怪。我认为当覆盖层逐渐消失时，图像必须逐渐淡入。您可以在www.appartement-tekoop.nl上看到该行为的示例。

我认为问题是与图像的z-index，但我不确定。

这是我的javascript覆盖:

 <script type="text/javascript">
     jQuery(function () {
          var $menu_main_nav = jQuery('#menu-main-nav');
          var $menu_main_nav_items = $menu_main_nav.children('li');
          var $oe_overlay = jQuery('#oe_overlay');
          var $pricetable_dropdown = jQuery(".price-header");
          var $menutoggle = jQuery('.menutoggle');
          var $mainmenu = jQuery('.main-nav');
          $menu_main_nav_items.bind('mouseenter', function () {
                var $this = jQuery(this);
                $this.children.addClass('slided selected');
                // updated code starts
                if($this.children('.menu-item-has-children').hasClass('not-shown')){
                    $menu_main_nav_items.not('.slided').children('.menu-item-has-children').hide();
                    $this.removeClass('slided');
                }
                else {
                    $this.children('.menu-item-has-children').css('z-index', '9999').stop(true, true).slideDown(200, function () {
                          $menu_main_nav_items.not('.slided').children('.menu-item-has-children').hide();
                          $this.removeClass('slided');
                    });
                }
                // updated code ends
          })
          .bind('mouseleave', function () {
                var $this = jQuery(this);
                $this.removeClass('selected').children('.menu-item-has-children').css('z-index', '1');
          });
          $menu_main_nav.bind('mouseenter', function () {
                var $this = jQuery(this);
                $oe_overlay.stop(true, true).fadeTo(1000, 0.3);
                $oe_overlay.css('z-index', '40');
                $this.addClass('hovered');
           })
           .bind('mouseleave', function () {
                var $this = jQuery(this);
                $this.removeClass('hovered');
                $oe_overlay.stop(true, true).fadeTo(1000, 0);
                $oe_overlay.css('z-index', '0');
                $menu_main_nav_items.children('.menu-item-has-children').hide();
          });
          $pricetable_dropdown.bind('click', function() {
                if (jQuery( this ).hasClass('clicked')) {
                    jQuery( this ).removeClass('clicked');
                    jQuery( 'section.detail-page' ).css('display', 'none');
                    jQuery( 'section.detail-page' ).css('display', 'block');
                } else {
                    jQuery( this ).addClass('clicked');
                    // $initialDivHeight = jQuery('section.detail-page').height();
                }
                jQuery( this ).next().fadeToggle();
          });
          $menutoggle.bind('click', function() {
                $mainmenu.toggle();
          });
     });
 </script>

Answer 1

你说得对，z-index把事情搞砸了…在过渡完成之前，覆盖会跳到页面上的一些元素后面。

没有必要改变鼠标悬停时叠加的z索引，从JS中删除它。在css中设置覆盖'z-index: 40'，并将其设置为'display: none'。

这就是你所需要的。当你用fadeOut()方法处理一个元素时，它会在它动画完成后设置"display: none"，这样你的鼠标就不能与它交互了，你可以点击它下面的任何东西。

希望这对你有帮助!