Hover effect on only one element and not affect the others

Question

How to animate only one element (div) each time, having class .box and not affect the other elements with same class. Something like this :

$(.box).hover(function() {
        $(.box).animate({ fontSize : '2rem' });
        $(.box).removeClass("main");
        // other things...

html:

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

I tried with .next() and .find() but I did not succeed because of my basic level in jQuery.

Answer 1

//use 'this' inside an event handler to reference the element being processed for the event
$('.box').hover(function(){
    $(this).animate(...);
    $(this).removeClass(...);
    $(this).whatever...
});

Ref. http://learn.jquery.com/events/event-basics/

Answer 2

EDIT

Due to correct comment this answer has been edited. You could try the following in case you would want to bind different, multiple (eg mouseover focus ) events, benefit of using .on() .

 $(".box").on({ mouseover: function() { $(this).animate({ fontSize : '2rem' }).addClass('red'); }, mouseleave: function() { $(this).animate({ fontSize : '1rem' }).removeClass('red'); } }); 

 .red { color:#f00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> 

In case you specifically want to use .hover( handlerIn, handlerOut ) then the above snippet would be re-written like in the below snippet...

Notice the handlerIn and handlerOut functions being used.

 $( ".box" ).hover( function() { $( this ).animate({ fontSize : '2rem' }).addClass('red'); }, function() { $( this ).animate({ fontSize : '1rem' }).removeClass('red'); } ); 

 .red { color:#f00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> 

Answer 3

how to make a simple code for animate only one element and not affect the others divs with same class like this.

$(<selector>)

Selects elements pseudo-based on CSS and some built in keywords by the jQuery team .

When you attach/bind an event to subscribe to on all of your selected elements

$('.box').hover(function() { /* do something */ })

You basically saying when any of the .box class elements are hovered by a mouse execute a function. jQuery will setup a context in which the event is binded with the value of this as the raw html element (not a jQuery object) as a feature. (you can read more about this here ). jQuery's selector engine also provides a way to convert raw html elements into jQuery object by simply passing them as a selector $(this) . Thus some as simple as the following is possible:

 $(document).ready(function(){ $('.box').hover( function() { $(this).addClass('is-hover'); }, function() { $(this).removeClass('is-hover'); }); }); 

 .box{border: 4px solid transparent} .box.is-hover{border-color: red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box">Test</div> <div class="box">Test</div> <div class="box">Test</div> <div class="box">Test</div> 

Replacing $(this) with $('.box') is executing a new query to find all elements with a box class, thus it will affect all the classes with a box class:

 $(document).ready(function(){ $('.box').hover( function() { $('.box').addClass('is-hover'); }, function() { $('.box').removeClass('is-hover'); }); }); 

 .box{border: 4px solid transparent} .box.is-hover{border-color: red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box">Test</div> <div class="box">Test</div> <div class="box">Test</div> <div class="box">Test</div> 

Granted if you want to do this a way the more experienced developers would consider best practices, you wouldn't even use jQuery.

 .box { font-size:1rem; transition: font-size .4s linear; } .box:hover { color:red; font-size: 2rem; } 

 <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div>