how can I scale each element separately?

Question

Hi guys I have the following code where I am trying to scale each element on mouse over but it seems that only the first element is scaling. Any idea?

Thanks

https://jsfiddle.net/1rdoxe84/

JS

$('#playButton').hover(function() { 
    $(this).addClass("m-icon--hovered");    
}, function() { 
    $(this).removeClass("m-icon--hovered");
});

Answer 1

Your selctor uses an Id selector (#). jQuery will always return only one element if the query uses the id (#) selector. Use a class selector or another type of selector to apply your function to multiple elements.

Answer 2

ID's must be unique. If you have multiple #playButton , than only first one will ever work. Replace it with class="playButton"

 $(document).ready(function() { $('.playButton').hover(function() { $(this).addClass("m-icon--hovered"); }, function() { $(this).removeClass("m-icon--hovered"); }); }) 

 .u-container { position: relative; } .u-line-height { line-height: 2.6; } .u-padding--none { padding: 0; } .m-button__icon { position: absolute; right: 10px; top: 8px; transition: all 0.3s; } .m-icon--play { width: 20px; height: 20px; vertical-align: top; } .m-icon--hovered { transform: scale(1.3); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="media" class="m-list"> <li class="video u-container u-padding--none u-line-height"> <img class="playButton m-button__icon m-icon--play" src="http://www.wayfm.com/wp-content/uploads/2014/06/playButton-150x150.png" /> </li> <li class="video u-container u-padding--none u-line-height"> <img class="playButton m-button__icon m-icon--play" src="http://www.wayfm.com/wp-content/uploads/2014/06/playButton-150x150.png" /> </li> </ul>