jquery change image on mouse rollover

问题

I have been having problems with this. I think this should be pretty simple but I cannot seem to get it to work. I want a new image to appear when rolling over my facebook button. Thanks for your help!

    <p align="right">
          <a href="http://www.facebook.com/AerialistPress" ><img height="30px" id="facebook" class="changePad" alt="Aerialist Press Facebook Page" src="/sites/aerialist.localhost/files/images/facebook300.jpg" /></a> 
           <a href="http://twitter.com/#!/AerialistPress" > <img height="30px" class="changePad" alt="Aerialist Press Twitter Page" src="/sites/aerialist.localhost/files/images/twitter300.jpg" /></a>
           <a href="http://www.pinterest.com/aerialistpress" ><img height="30px" class="changePad" alt="Aerialist Press Pinterest Page" src="/sites/aerialist.localhost/files/images/pinterest300.jpg" /></a>
</p>

<script>
jQuery(document).ready(function(){
     jQuery('#facebook').mouseover(function() { jQuery('#facebook').attr('src').replace('/sites/aerialist.localhost/files/images/facebook-roll.jpg'); })

});
</script>

回答1:

The attr method returns the value of the property specified (in this case, 'src'), and the replace is trying to modify the string and return a new instance. However, you're not doing anything with the new instance.

To set the attribute you must pass an additional parameter to the attr method.

Here's the documentation for the attr method: http://api.jquery.com/attr/

Your code should be:

jQuery('#facebook').attr('src', '/sites/aerialist.localhost/files/images/facebook-roll.jpg');

回答2:

Don't use replace, just set the src attr directly:

jQuery('#facebook').attr('src', '/sites/aerialist.localhost/files/images/facebook-roll.jpg');

回答3:

Change

jQuery('#facebook').attr('src').replace('/sites/aerialist.localhost/files/images/facebook-roll.jpg');

jQuery('#facebook').attr('src', '/sites/aerialist.localhost/files/images/facebook-roll.jpg');

You can also use $('#facebook') instead of $('#facebook')

回答4:

Here ya go!

$("#img").hover(function(){
//mouseover
     $(this).attr('src', 'https://twimg0-a.akamaihd.net/profile_images/1768071248/smile_normal.jpg'); 
    },
    function(){
//mouseout
    $(this).attr('src', 'http://www.bestfreeicons.com/smimages/Emotes-face-smile-icon.png');
});

回答5:

This works

<script type ="text/javascript">

 $(document).ready(function(){
 $('#facebook').mouseenter(function() { 
     $('#facebook').attr("src","heretheotherimage.png"); 
 })

 $('#facebook').mouseleave(function() { 
     $('#facebook').attr("src","heretheimage.png"); 
 })

 });
 </script>

 <img src ="heretheimage.png" id ="facebook" />

来源：https://stackoverflow.com/questions/13058912/jquery-change-image-on-mouse-rollover

标签

jquery

html

rollover