jquery - jQuery更改链接上的图像悬停

Question

我对下面的代码有疑问。不知何故，我无法使用 jQuery 脚本更改图像背景。

HTML 代码如下所示：

• 显示图像的部分：

  <div class="group-image img-responsive img-ctr"></div>
  

• 生成相关链接的部分（简化）：

  <a class="hoverlink" href="{complete_path}" data-img="{cat_image_path}">{cat_name}</a>

jQuery 代码如下所示：

$(document).ready(function(){
        $('.hoverlink').hover(function(){$('.group-image').css('background', $(this).attr('data-img'))});
});

data-image 标记包含相关链接的图像的正确 URL，但是当我悬停任何这些链接时，它不会将backgroundCSS 添加到group-imagediv。一个例子的JSFillde

任何线索我在哪里犯了错误？

谢谢

Answer 1

$('.hoverlink').hover(function(){
    $('.group-image').css('background-image', 'url('+$(this).attr('data-img')+')')
});

这行得通！更新的小提琴

Answer 2

您的背景作业缺少url('')：DEMO

$('.hoverlink').hover(function(){
    $('.group-image').css('background', "url('" + $(this).attr('data-img') + "')")
});