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

Question

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

我添加了CSS class 来为页面添加深色背景。此外，我添加了一个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 的第二个属性是不透明度，但您在元素本身上使用 display。您将需要使用 fadeIn/fadeOut，因为它们与 display 属性一起使用。所以它应该看起来像这样......

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