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'并将其设置为'display：none'。

这就是你需要的一切。当你fadeOut（）一个元素，它在完成动画后设置'display：none'，所以你的鼠标将无法与它交互，你可以点击它下面的任何东西。

希望这有帮助！

访问菜单时，CSS覆盖不正常

1 个答案: