[英]how can I scale each element separately?
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/ https://jsfiddle.net/1rdoxe84/
JS JS
$('#playButton').hover(function() {
$(this).addClass("m-icon--hovered");
}, function() {
$(this).removeClass("m-icon--hovered");
});
Your selctor uses an Id selector (#). 您的选择者使用ID选择器(#)。 jQuery will always return only one element if the query uses the id (#) selector.
如果查询使用id(#)选择器,则jQuery将始终仅返回一个元素。 Use a class selector or another type of selector to apply your function to multiple elements.
使用类选择器或另一种选择器将函数应用于多个元素。
ID's must be unique. ID必须是唯一的。 If you have multiple
#playButton
, than only first one will ever work. 如果您有多个
#playButton
,那么只有第一个可以使用。 Replace it with class="playButton"
将其替换为
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.