我有一个网站,在访问菜单时会在其中实现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”。
那就是您所需要的。当您对一个元素进行淡出淡出后,它在设置动画后会在其上设置“显示:无”,因此鼠标将无法与其进行交互,因此您可以单击其下的任何内容。
希望这可以帮助!