I was programming a simple profile and I want to put a delay after the 'mouseenter' as soon as I move the mouse enters this 'mouseenter' and along with delay to show a box that is called '.user_widget' I am using:
addClass and removeClass;
Css:
.user_widget {
background-color: rgb(255, 255, 255);
position: relative;
top: 39px;
width: 210px;
height: 305px;
z-index: 4;
border-radius: 3px;
margin: 0 auto;
box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.14);
}
.ativo {
display: block !important;
background-color: rgb(255, 255, 255)!important;
}
.desativado {
display: none !important;
}
HTML and JavaScript:
<div class="user_widget desativado">
<script type="text/javascript">
$(".user").click(function(){
$('.user_widget').addClass('desativado');
$('.user_widget').removeClass('ativo');
$('.user').removeClass('ativo');
});
</script>
<script type="text/javascript">
$(".user").mouseenter(function(){
$('.user_widget').removeClass('desativado');
$('.user').addClass('ativo');
$('.user_widget').addClass('ativo');
});
</script>