PC와 mobile에서 다르게 출력하기 질문입니다. 채택완료

INDEX    

<?php if($is_mobile){ ?>
    <a href="#" class="back_to_top_mobile"><img class="buttonhover" src="/../../images/upbutton.png"></a>
    <?php } else { ?>
        
    <a href="#" class="back_to_top"><img class="buttonhover" src="/../../images/upbutton.png"></a>
<?php } ?>

JS

        var offset = 220;  
    var duration = 500;  
    jQuery(window).scroll(function() {  
        if (jQuery(this).scrollTop() > offset) {  
            jQuery('.back_to_top').fadeIn(duration);  
        } else {  
            jQuery('.back_to_top').fadeOut(duration);  
        }  
    });  
      
      
    jQuery('.back_to_top,.back_to_top_mobile').click(function(event) {  
        event.preventDefault();  
        jQuery('html, body').animate({scrollTop: 0}, duration);  
        return false;  
    })  

        jQuery('.back_to_top,.back_to_top_mobile').on('mouseenter', function() { 
        $(this).find('img').attr('src','/../../images/upbuttonhover.png');
       })
        jQuery('.back_to_top,.back_to_top_mobile').on('mouseleave', function() { 
        $(this).find('img').attr('src','/../../images/upbutton.png');
       })

CSS

.back_to_top{position:fixed;bottom:0;left:50%; margin-left:500px; margin-bottom:10px;}  
 
.back_to_top img:hover{background-image:url(/../../images/upbuttonhover.png) left center} 

.back_to_top_mobile{position:fixed;bottom:0; right:0; margin-bottom:10px;}  
 
.back_to_top_mobile img:hover{background-image:url(/../../images/upbuttonhover.png) left center} 

왜 적용이 안되는거죠?

PC는 적용이 되지만 모바일은 안되고 있습니다.