Question

大家好我有以下代码，我试图在鼠标上缩放每个元素，但似乎只有第一个元素是缩放。有什么想法吗？

由于

JS

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

Answer 1

您的selctor使用Id选择器（＃）。如果查询使用id（＃）选择器，jQuery将始终只返回一个元素。使用类选择器或其他类型的选择器将您的函数应用于多个元素。

Answer 2

ID必须是唯一的。如果你有多个#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>

如何分别缩放每个元素？

2 个答案: