CODEWITHSUNDEEP
jqueryhtmlcssjquery-animatemousehover
Jasmine Jules-White
Jasmine Jules-White

Reputation: 3

Applying a hover effect to multiple of the same element

So it took me a bit but I got the hover effect that I wanted for my website element but now the problem is that it only does it for the first element on the site and not any of the other ones... I'm not sure why it's only attaching to the first element and would really like it to to work for all of them. Earlier I had it where it would make the hover effect happen on all of them at the same time but I didn't want that to happen either.

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

Upvotes: 0

Views: 62

Answers (1)

empiric
empiric

Reputation: 7878

As I wrote in the comments above the id has to be unique.

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

Upvotes: 2

Related Questions