Javascript 访问菜单时CSS覆盖无法正常工作

我有一个网站，在那里有一个CSS覆盖实现时，菜单是访问。此覆盖在页面的其余部分淡入淡出，但不是通过z索引显示菜单本身。所有这些都可以在鼠标悬停时正常工作，覆盖层会淡入，其余部分看起来会变暗

但是，当鼠标不再出现在菜单上时，覆盖层的淡出会被弄乱。覆盖层本身会正确淡出，但所有图像都会立即显示（不透明度1？），这使它看起来很奇怪。我认为当覆盖层淡出时，图像必须淡入。您可以在www.appartement-tekoop.nl上看到该行为的示例

我认为问题在于图像的z索引，但我不确定

这是我的覆盖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>

jQuery（函数（）{
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$pricetabledropdown=jQuery（“.price header”）；
var$menutoggle=jQuery（'.menutoggle'）；
var$main menu=jQuery（'.main nav'）；
$menu\u main\u nav\u items.bind（'mouseenter'，function（）{
var$this=jQuery（this）；
$this.children.addClass（'slided selected'）；
//更新的代码启动
if（$this.children（'.menu项有子项'）.hasClass（'not-show'））{
$menu_main_nav_items.not（'.slided'）.children（'.menu item has children'）.hide（）；
$this.removeClass（'slided'）；
}
否则{
$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'）；
});
}
//更新代码结束
})
.bind（'mouseleave'，函数（）{
var$this=jQuery（this）；
$this.removeClass（'selected'）.children（'s.menu item has children'）.css（'z-index'，'1'）；
});
$menu\u main\u导航绑定（'mouseenter'，function（）{
var$this=jQuery（this）；
$oe_叠加。停止（真，真）。fadeTo（1000，0.3）；
$oe_overlay.css（'z-index'，'40'）；
$this.addClass（'hovered'）；
})
.bind（'mouseleave'，函数（）{
var$this=jQuery（this）；
$this.removeClass（'hovered'）；
$oe_叠加。停止（真，真）。fadeTo（1000，0）；
$oe_overlay.css（'z-index'，'0'）；
$menu_main_nav_items.children（'.menu项有子项'）.hide（）；
});
$pricetable_下拉列表.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'）；
}否则{
jQuery（this）.addClass（'clicked'）；
//$initialDivHeight=jQuery（'section.detail page'）.height（）；
}
jQuery（this.next（）.fadeToggle（）；
});
$menutoggle.bind（'click'，function（）{
$main menu.toggle（）；
});
});

你说得对，z索引把事情搞砸了。。。在转换完成之前，覆盖在页面上某些元素的后面

无需更改鼠标上的覆盖z索引。不过，请将其从JS中删除。在css中设置覆盖“z-index:40”，并将其设置为“display:none”

这就是你所需要的。当您淡出（）一个元素时，它会在完成动画制作后在其上设置“display:none”，这样您的鼠标将无法与其交互，您可以单击它下面的任何内容

---

希望这有帮助

谢谢@DanV，这确实有效！谢谢你的解释。：）