CODEWITHSUNDEEP
jquery
Esser
Esser

Reputation: 540

Move an image when hovering with jquery

I'm trying to get the two icons on the left to move to the left when hovering. Can anyone tell me why it's not working? here's the fiddle http://jsfiddle.net/JLfvz/ here's the HTML

<div id="socials">
  <a href="http://twitter.com/" title="Twitter" class="social"><img     src="http://www.dot.state.oh.us/groups/ohol/PublishingImages/twitter-icon.gif"  alt="Twitter"></a>
  <a href="http://facebook.com/" title="Facebook"><img src="images/fb.png" alt="Facebook"></a><br>
  <a href="http://youtube.com" title="You Tube" class="social"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRvpJGY5jiR_SO4Hp2d6unwHcR3J-2vHxYOQ_-rVs8ZxUW8Mn5T6UNI1i0L" alt="youtube"></a>
  <a href="http://linkdin.com" title="Linkd In"><img src="images/in.png" alt="linkdin"></a>

  </div>

Upvotes: 1

Views: 116

Answers (1)

jmar777
jmar777

Reputation: 39649

You need to update the css on the child img element, not the top-level a.social element:

$(document).ready(function(){
    $(".social").hover(function(){
        $(this).children().css("left","0");
    },function(){
        $(this).children().css("left","30px");
    });
});

Updated demo: http://jsfiddle.net/JLfvz/2/

Upvotes: 1

Related Questions