duanrong3308
duanrong3308
2016-04-12 09:57

jQuery不显示背景图像

已采纳

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!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • doupoji3856 doupoji3856 5年前

    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")});
    
    点赞 评论 复制链接分享
  • donglei3370 donglei3370 5年前

    Try below syntax

    var imgUrl = '<?php echo get_stylesheet_directory_uri(); ?>/img/person.jpg';
    
    $(".person").css("background-image","url("+ imgUrl +")");
    
    点赞 评论 复制链接分享

为你推荐