How to use jQuery’s reverse function to undo something?

Question

I am using the code below to apply an effect and undo as soon as the mouse is removed but it does not seem to work and shows no error message. I am using version 1.12.4 of jQuery.

$(".project").on("hover", 
    (function() {

        $(this).find(".sendProposal").removeClass("hide");
    }, 
    function(){

        $(this).find(".sendProposal").addClass("hide");   
    }
));

Answer 1

hover is not a Handler that the method on() you understand. jQuery makes events available mouseenter and mouseleave. To make the developer’s life easier, there is the method hover(). According to the documentation,

$( selector ).hover( handlerIn, handlerOut )

is an abbreviation of

$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

You can write the method as follows:

$(".project").hover(function() {
        $(this).find(".sendProposal").removeClass("hide");
    }, function(){
        $(this).find(".sendProposal").addClass("hide");   
    }
);

.project{
  width: 200px;
  height: 200px;
  background-color: red;
}

.sendProposal{
  width: 100px;
  height: 100px;
  background-color: green;
}

.hide{
  display: none;
}

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

<div class="project">
  <div class="sendProposal hide"></div>
</div>

As I don’t know the structure of your CSS, I invented a few things just for the purpose of exemplification.

In this example, the way it is, there is still the possibility of using the method toggleClass(), which makes the snippet more elegant. But since I don’t know exactly what you want to do, maybe he won’t answer. Anyway, follow the same example, using the quoted method.

$(".project").hover(function() {
  $(".sendProposal", this).toggleClass("hide");
});

.project{
  width: 200px;
  height: 200px;
  background-color: red;
}

.sendProposal{
  width: 100px;
  height: 100px;
  background-color: green;
}

.hide{
  display: none;
}

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

<div class="project">
  <div class="sendProposal hide"></div>
</div>

As a bonus, see how I built the selector in the second example, without using the method find(). This is one more possibility that jQuery offers.

You could still use the pseudo-selector ::hover, and not depend on the JS, but there is another story...

Answer 2

You grouped the two functions into parentheses, making them the 2nd parameter of the call to . on().

Thus, your call was with 2 parameters:

.on('hover', (function(), function()))

That’s why, by removing the 2nd option, the one that remains works just like Hover-in, but keeping both as is, nothing works because the result is an invalid callback for the 2nd parameter. on()

In the case of Hover, to map the two events (Hover-in and Hover-out), Oce needs to pass them in a specific way to function .on()

  $(".project").on({
    mouseenter: function() {
      $(this).find(".sendProposal").removeClass("hide");
    },
    mouseleave: function() {
      $(this).find(".sendProposal").addClass("hide");
    }
  });

$(document).ready(function() {
  $(".project").on({
    mouseenter: function() {
      $(this).find(".sendProposal").removeClass("hide");
    },
    mouseleave: function() {
      $(this).find(".sendProposal").addClass("hide");
    }
  });
});

.hide {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="project">
  <h1>Projeto</h1>
  <p class="sendProposal hide">
    Enviar proposta
  </p>
</div>