Hover effect with javascript calling css class

Question

I want to replace the 'product' class with the 'product' class with javascript, as soon as I pass the mouse through the div. How do this code?

Js

$(function(){
$(".produto").hover(
function(){
//Ao posicionar o cursor sobre a div
$(this).addClass('produtocomprar');
},
function(){
//Ao remover o cursor da div
$(this).removeClass('produtocomprar');
        }
    );

Css

.produto {  
 position: relative;  
 width: 190px;  
 height: 340px;  
 margin-left: 40px;
 margin-top: 20px;
 float: left;  
 display: flex;  
 flex-direction: column; 
 background-color: #ffffff; 
} 

.produtocomprar {
position: relative;  
width: 200px;  
height: 340px;  
margin-left: 40px;
margin-top: 20px;
float: left;  
display: flex;  
flex-direction: column; 
background-color: red; 
}

Answer 1

Use the method toggleClass in the .hover:

$(function(){
   $(".produto").hover(function(){
      $(this).toggleClass('produtocomprar produto');
   });
});

.produto {  
 position: relative;  
 width: 190px;  
 height: 340px;  
 margin-left: 40px;
 margin-top: 20px;
 float: left;  
 display: flex;  
 flex-direction: column; 
 background-color: #ffffff; 
} 

.produtocomprar {
position: relative;  
width: 200px;  
height: 340px;  
margin-left: 40px;
margin-top: 20px;
float: left;  
display: flex;  
flex-direction: column; 
background-color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="produto">Passe o mouse</div>

Using only a callback on .hover, the two events of the method are called alternately when the mouse enters and when it leaves, since the code to be executed is the same for both events.