jQuery zeigt kein Hintergrundbild

Question

Ich habe eine neue Frage.

Ich versuche, ein Hintergrundbild für ein A-Element anzuzeigen. Bei Mouseover sollte das Bild zu einem anderen Bild wechseln. Das Problem ist, dass die Bilder nicht angezeigt werden. Als ich den Code in CSS hatte, funktionierte es gut, also muss es meine Funktion sein, die Probleme macht.

Mein 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> 

Es gibt einige PHP-Wordpress-Funktionen zwischen.

Vielen Dank im Voraus!

Answer 1

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

Versuchen Sie, diese

$(".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")});  
}); 

Änderungen Hergestellt

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

zu

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

Answer 2

Try unter Syntax

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

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