Delay does not work, can anyone help me?

2

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>
    
asked by anonymous 23.06.2017 / 19:14

2 answers

0

Change your mouseenter function to look like this:

<script type="text/javascript">
     //variavel global 
     var delay = 2000; 

     function mouseEnter(){
        $('.user_widget').removeClass('desativado');
        $('.user').addClass('ativo');
        $('.user_widget').addClass('ativo');
     }
</script> 

And for the call, you put the command in your "user" element by calling the function this way:

onmouseover="setTimeout(mouseEnter,delay);"
    
23.06.2017 / 19:29
0

People should be a simple code that I'm not able to do, what I want to do is type like so when hovering over the "user" class that would be "mouseenter" would activate the class "enabled" and remove the class "disabled";

The class "enabled" is "display: block" and the class "disabled" is the "display: none", at the beginning I put it to not appear that would be "user_widget disabled" so when the mouse activates the call " mouseenter "and it would look like" user_widget enabled ", so you, what I want is a delay in it of 1s, because it is appearing very fast, but I want to keep the two mouseenter calls and the" click " when you click on the "user" remove the "enabled" and add "disabled" back.

    
23.06.2017 / 22:58