jquery - 将悬停效果应用于多个相同元素

Question

所以我花了一点时间，但我得到了我想要的网站元素的悬停效果，但现在的问题是它只对网站上的第一个元素而不是任何其他元素......我我不确定为什么它只附加到第一个元素并且真的希望它适用于所有元素。早些时候我有它可以使悬停效果同时发生在所有这些人身上，但我也不希望这种情况发生。

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

#row {

      margin-left: 20%;
    }


    #art {

      margin: 25px 2% 0 2%;
      width: 250px;
      height: 250px;
      border-radius: 50px;
      background-color: orange;
      display: inline-block;

    }

<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>

Answer 1

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

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

<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>

Demo