Question

修改

我发现它实际上正在消失，它只是在开始淡化之前移除了背景图像，所以我无法看到它......呃。我刚删除了.css('background','')，所以它现在消失了。我的一些CSS样式仍然没有影响它。不知怎的，它正在使用background-repeat: initial;来覆盖类样式。这是因为js正在影响它的造型吗？

原件：

我已经在这里阅读了其他一些问题，他们帮助我做到了这一点，但我仍然没有看到解决方案。

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

我已经获得了要分配的背景图像，添加了一个类以使其可见。它可以淡入淡出，但不会消失。当我在chrome dev工具中手动删除可见性类时，它会按预期淡出，但不会在jquery删除它时淡出。其他＆＃34;背景 - ＆＃34;除非我添加！重要，否则css样式不起作用。我不知道是什么压倒了他们。

的 JSFiddle

HTML

<div class="backdrop"></div>
<ul>
    <li><a href="#" class="item" data-img="http://goo.gl/hbKhMi">one</a></li>
    <li><a href="#" class="item" data-img="http://goo.gl/7p0Kki">two</a></li>
    <li><a href="#" class="item" data-img="http://goo.gl/EHW4Xs">three</a></li>
</ul>

CSS

.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;
}

JS

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

Answer 1

您需要更改JS代码，使用TypeError: Regexp can't be coerced into Fixnum代替backgroundImage来设置图片，而background时，请不要删除mouseleave班级。应该是：

backgroundImage

FIDDLE：https://jsfiddle.net/lmgonzalves/y2v9sa4h/8/

使用JQuery转换背景图片时出现问题

修改

的 JSFiddle

HTML

CSS

JS

1 个答案: