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

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

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

Applying a hover effect to multiple of the same element

html

css

jquery

mousehover

jquery-animate