How to use the inverse function of jQuery to undo something?

hover is not a handler that the on() method understands. To do this, jQuery provides mouseenter events and mouseleave ". To make the developer's life easier, the hover() method exists. 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><divclass="project">
  <div class="sendProposal hide"></div>
</div>

As I do not know the structure of your CSS, I invented some things just for the purpose of exemplification.

In this example, as it is, there is still the possibility to use the method toggleClass() , which makes the snippet more elegant. But since I do not know exactly what you want to do, maybe he will not answer. Either way, follow the same example, using the above 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><divclass="project">
  <div class="sendProposal hide"></div>
</div>

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

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

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

So your call got 2 parameters:

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

So, by removing the 2nd option, the remaining one works just like hover-in, but keeping both as it is, nothing works, as the result is an invalid callback for the 2nd .on () / p>

In the case of the hover, to map the two events (hover-in and hover-out), you need 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><divclass="project">
  <h1>Projeto</h1>
  <p class="sendProposal hide">
    Enviar proposta
  </p>
</div>