Применение эффекта наведения к нескольким одним и тем же элементам

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