Question

我有以下div：

<div class="bgslider">
</div>

我试图在另一个元素正在接收事件时动态更改div的背景（例如，通过事件）。

bgslider类的原始css是：

.bgslider {
/*background: url(../img/slider/image1.jpg) no-repeat center top ;*/
background-image: url(../img/slider/image2.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 450px;
/*background-attachment: fixed;*/
display:block;
}

我的javascript如下：

$( ".slidermenu-li" ).hover(function( event ) {
    var image=$(this).data('img-src');
    var path="../img/slider/";
    var image_url_css='url('+path+image+');';
    $(".bgslider").css('background-image', image_url_css);

  });

调用javascript并且图像路径正确但在浏览器上背景图像不会改变。

Answer 1

看起来您输错了，您使用的是image_url而不是image_url_css。

试试这个：

$( ".slidermenu-li" ).hover(function( event ) {
    var image=$(this).data('img-src');
    var path="../img/slider/";
    var image_url_css='url('+path+image+');';
    $(".bgslider").css('background-image', image_url_css);

  });

Answer 2

问题是变量image_url_css还包括分号，但Jquery只需要属性的值。现在它正在发挥作用。

Jquery动态更改背景不起作用

2 个答案: