javascript - 访问菜单时 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 把事情搞砸了......在过渡完成之前，Overlay 跳到了页面上的一些元素后面。

鼠标悬停时无需更改叠加层 z-index，请将其从您的 JS 中删除。在您的 css 中设置叠加层“z-index:40”并将其也设置为“显示:无”。

这就是您所需要的。当您 fadeOut() 一个元素时，它会在完成动画后在其上设置“display: none”，因此您的鼠标将无法与其交互，您可以单击其下方的任何内容。

希望这对您有所帮助!