Brief clarification on 'hover' - where is the function for mousing off?


#1


https://www.codecademy.com/courses/web-beginner-en-JwhI1/1/2?curriculum_id=50a3fad8c7a770b5fd0007a1

Hi all. I've understood the HOW of the hover function but not the WHY. In the code below (which passes), when my mouse moves over the 'div' element, it looks like two things happen - the class '.active' is applied, and simultaneously taken away again.

I would have thought, logically, that I would have needed the .removeClass function to be applied NOT when I '.hover', but when I do move the mouse OFF the 'div' element.

Obviously I'm wrong because the code works.

Can anyone explain why?


$(document).ready(function(){

  $('div').hover(
    function(){
        $(this).addClass('active');
    },
    function(){
        $(this).removeClass('active');
    }
  );

});


#2

both function now execute when you hover over your div, if i where you, i would use mouseover and mouseout, which gives you more control over when to use which action


#3

JQuery Hover link. According to the webite:

"hover();" bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

I tried our first Jquery exercise link to test:

$(document).ready(function() {
   $('div').hover(
       function()
       {
          $(this).hide({
             width: '+=10px'
           });
    
       },
       
       function()
       {
          $(this).show({
             height: '+=10px'
           });
    
       }
       
       
   );
   
});

It works with hover() (both functions); As hover can bind two handlers. For click() or others it only execute the second function. In this case the show() one will only execute with click() or other events.