javascript - 通过将鼠标悬停在导航菜单上使页面变暗

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

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