Javascript 使用JQuery转换背景图像时出现问题 编辑

我发现它实际上正在淡出，它只是在开始淡出之前删除了背景图像，所以我看不到它…嗯。我刚刚删除了

.css（'background'，''）

，所以它现在就消失了。不过，我的一些css样式仍然没有影响它。不知何故，它得到了一个

背景重复：初始放在覆盖类样式的上面。这是因为js是根据其样式进行操作的吗


原件：

我已经阅读了这里的其他一些问题，它们帮助我走到了这一步，但我仍然没有看到解决方案

我在悬停时背景图像褪色时遇到问题。我将图像URL存储为链接列表的数据属性。当您将鼠标悬停在链接上时，通过jquery将另一个div的背景设置为相应的图像

我已经得到了要分配的背景图像，添加了一个类使其可见。它的工作原理是淡入淡出。当我在chrome开发工具中手动删除visibility类时，它会按预期淡出，但当jquery删除它时不会。其他“背景”-css样式也不起作用，除非我添加一个！重要的。但我不知道是什么压倒了他们


HTML
JS
您需要稍微更改JS代码，使用
backgroundImage
而不是
background
来设置图像，并且当
mouseleave
时，不要删除
backgroundImage
，只删除类。应该是：

$(document).ready(function() {
    $('.item').mouseenter(function() {
        $('.backdrop').css('backgroundImage','url('+$(this).data("img")+')').addClass('visable');
    });
    $('.item').mouseleave(function() {
        $('.backdrop').removeClass('visable');
    });
});

小提琴：

.backdrop {
    width:450px;
    height:400px;
    opacity: 0;
    -webkit-transition: opacity 0.75s;
    transition: opacity 0.75s;
    background-position:center;
    background-repeat: no-repeat;
}

.visable{
      opacity:1;
}

$(document).ready(function() {
    $('.item').mouseenter(function() {
        $('.backdrop').css('background','url('+$(this).data("img")+')').addClass('visable');
    });
    $('.item').mouseleave(function() {
        $('.backdrop').css('background', '').removeClass('visable');
    });
});

$(document).ready(function() {
    $('.item').mouseenter(function() {
        $('.backdrop').css('backgroundImage','url('+$(this).data("img")+')').addClass('visable');
    });
    $('.item').mouseleave(function() {
        $('.backdrop').removeClass('visable');
    });
});