jQuery change images on links hover

Question

I have a problem with a code below. Somehow I'm not able to change image background using jQuery script.

HTML code looks like:

• part to display an image:

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

• part to generate related links (simplified):

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

jQuery code looks like:

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

data-image tag contains correct URL to an image for related links, but when I hover any of those links it doesn't add background CSS to group-image div. JSFillde of an examle

Any clue where I have made an error?

Thanks

Answer 1

You are missing url('') from your background assignment: DEMO

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

Answer 2

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

This works!! Updated fiddle