2

Estava programando um simples perfil e estou querendo colocar um delay depois do 'mouseenter' assim que passar o mouse entra esse 'mouseenter' e junto com delay para mostrar uma caixa que se chama '.user_widget' estou usando:

addClass e 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 e 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>

2 Respostas 2

0

Altere a sua função mouseenter para ficar assim:

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

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

E para a chamada, você coloca no seu elemento "user" o comando chamando a função desta maneira:

onmouseover="setTimeout(mouseEnter,delay);"
16
  • Olá Rafa, só que tipo cara, estou usando background para trocar a cor do user atrás quando entrar o mouseenter, só que está muito rápido; Olha um print: prntscr.com/fnd18r sou novato em javascript ainda :/
    – user81560
    23/06/2017 às 17:32
  • ok, dei uma mudada, da uma olhada nesse jeito, bem simples e faz o que você quer 23/06/2017 às 17:41
  • Então Rafa eu coloquei assim: <div class="user" onmouseenter="setTimeout(mouseEnter,delay);"> Só que não aconteceu nada quando passo o mouse.
    – user81560
    23/06/2017 às 17:45
  • substitua por onmouseover="javascript:setTimeout(mouseEnter,delay);" 23/06/2017 às 17:47
  • Não acontece nada, prntscr.com/fnd87s , erro no javascript : prntscr.com/fnd8jr
    – user81560
    23/06/2017 às 17:49
0

Gente deve ser um código simples que eu não estou conseguindo fazer, o que eu quero fazer é tipo assim, quando passar o mouse por cima da class "user" que seria "mouseenter" iria ativar a class "ativado" e remover a class "desativado";

A class "ativado" é "display: block" e a class "desativado" é a "display: none", no incio eu coloquei para não aparecer que seria "user_widget desativado" então quando passa o mouse ativa a chamada "mouseenter" e ficaria assim "user_widget ativado", então tu bem, o que eu quero é um delay nele de 1s, porque está aparecendo muito rápido, mais quero manter as duas chamadas a de "mouseenter" e a de "click" que é quando clicar no "user" remover o "ativado" e adicionar "desativado" de volta.

Você deve fazer log-in para responder a esta pergunta.