Question

当我将鼠标悬停在菜单上时，我正试图调暗页面。我使用ubermenu（超级菜单）作为导航菜单，并在Wordpress上使用X主题。

我添加了CSS class以向页面添加黑暗背景。此外，当我将鼠标悬停在mega菜单的其中一个标签上时，我添加了piece of code来调暗页面（在此示例中，＃menu-item-443是一个标签的ID）。

当我尝试测试代码时，它根本不起作用。我尝试将它添加到Cornerstone可视化编辑器中，它在编辑器中工作，但之后无法在实际页面上运行。

为什么代码不适用于页面会出现什么问题？

任何帮助将不胜感激！

用于使页面变暗的CSS代码：

.dim{
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5;
    display: none;

}

调暗页面的代码：

$('#menu-item-443').hover(function(){
    $('.dim').fadeTo(200, 1);
}, function(){
    $('.dim').fadeTo(200, 0, function(){
        $(this).hide();
    });
});

Answer 1

fadeTo的第二个属性是不透明度，但您在元素本身上使用显示。您需要使用fadeIn / fadeOut，因为它们与display属性一起使用。所以看起来应该是这样......

$('#menu-item-443').hover(function(e){
    e.preventDefault();
    e.stopPropagation();
    $('.dim').fadeIn(200);
}, function(){
    $('.dim').fadeOut(200, function(){
        $(this).hide();
    });
});

通过鼠标悬停在导航菜单上来调整页面

1 个答案: