我有一个网站,在访问菜单时会在其中实现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>

最佳答案

没错,z索引使事情变得混乱了……在过渡完成之前,叠加层跳到了页面上某些元素的后面。

鼠标悬停时无需更改叠加层Z索引,请将其从JS中删除。在CSS中设置叠加层“ z-index:40”,并将其设置为“ display:none”。

那就是您所需要的。当您对一个元素进行淡出淡出后,它在设置动画后会在其上设置“显示:无”,因此鼠标将无法与其进行交互,因此您可以单击其下的任何内容。

希望这可以帮助!

10-05 20:36
查看更多