Hover effect with javascript calling css class

Question

Hover effect with javascript calling css class

Navigation

#1 by (0 votes)

0

I want to replace the 'product' class with the 'product-buy' class with javascript, as soon as I move the mouse over the div. How do I make 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; 
}

javascript html css hover

asked by anonymous 18.05.2018 / 23:28

1 answer

Concatenate variable with id searched by Javascript Javascript Flyweight object with WeakMap or WeakSet

score 0 · Accepted Answer

Use the method toggleClass in .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><divclass="produto">Passe o mouse</div>

Using only a callback in .hover , the two method events are when the mouse comes in and out, code to be executed is the same for both events.