Question

所以它花了我一点但我得到了我想要的网站元素的悬停效果，但现在问题是它只对网站上的第一个元素而不是其他任何一个...我和＃39;我不确定为什么它只附加到第一个元素，并且真的希望它适用于所有这些元素。之前我已经知道它会让所有这些悬浮效果同时发生，但我也不希望这种情况发生。

＆＃13;

$(document).ready(function() {
  $("#art").mouseover(function() {
    $(this).animate({
      backgroundColor: '#f00'
    }, 1000);
  }).mouseout(function() {
    $(this).animate({
      backgroundColor: '#ccc'
    }, 1000);
  });
});

＆＃13;

#row {

      margin-left: 20%;
    }


    #art {

      margin: 25px 2% 0 2%;
      width: 250px;
      height: 250px;
      border-radius: 50px;
      background-color: orange;
      display: inline-block;

    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="col5" id="row">
  <div class="col1" id="art">Portfolio Piece #1</div>
  <div class="col1" id="art">Portfolio Piece #1</div>
  <div class="col1" id="art">Portfolio Piece #1</div>
</div>

＆＃13;

Answer 1

正如我在上面的评论中所写，id必须是唯一的。

＆＃13;

$(document).ready(function() {
  $(".art").mouseover(function() {
    $(this).animate({
      backgroundColor: '#f00'
    }, 1000);
  }).mouseout(function() {
    $(this).animate({
      backgroundColor: '#ccc'
    }, 1000);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="col5" id="row">
  <div class="col1 art" id="art_1">Portfolio Piece #1</div>
  <div class="col1 art" id="art_2">Portfolio Piece #1</div>
  <div class="col1 art" id="art_3">Portfolio Piece #1</div>
</div>

＆＃13;

<强> Demo

将悬停效果应用于同一元素的多个

1 个答案: