jQuery不显示背景图片

Question

I have a newbie question.

I am trying to display a background-image for an a-element. On mouseover the picture should change to different picture. The problem is that the pictures are not being displayed. When I had the code in CSS it worked fine so it must be my function that makes problems.

My code:

jQuery(document).ready(function($){
    $(document).ready(function() {
        $(".person").css({background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/img/person.jpg')});
        $(".person").mouseover(function() {
            $(this).css({background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/img/person-hover.jpg')});    
        });      
    });
    var body = $( 'body' );
}); 

HTML:

<div class="silhoulettes">
    <a class="person" href="<?php echo get_permalink(41); ?>"></a>
</div>

There are some php wordpress functions between.

Thank you very much in advance!

Answer 1

The correct way of giving css via jQuery is css("propertyname","value"); and css({"propertyname":"value","propertyname":"value",...}); for multiple style.

Try this

$(".person").css({"background-image"," url('<?php echo get_stylesheet_directory_uri(); ?>'/img/person.jpg")});
$(".person").mouseover(function() {
     $(this).css({"background-image", "url('<?php echo get_stylesheet_directory_uri(); ?>'/img/person-hover.jpg")});    
 }); 

Changes Made

$(".person").css({background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/img/person.jpg')}); 

to

$(".person").css({"background-image"," url('<?php echo get_stylesheet_directory_uri(); ?>'/img/person.jpg")});

Answer 2

Try below syntax

var imgUrl = '<?php echo get_stylesheet_directory_uri(); ?>/img/person.jpg';

$(".person").css("background-image","url("+ imgUrl +")");