1

Eu tenho o seguinte código: Gostaria de saber alguma função que possa parar o celular ao passar o mouse por uns 10 segundos, após a seta ser retirada de cima. Obrigado desde já!

<!DOCTYPE html>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script>
    <link rel="icon" href="img/rota_logo.png">
    <title>Rota Calculada</title>

        <script type="text/javascript">
            $(document).ready(function () {
                var $ativa = $('.mostra');
                var $elemento = $('.elemento');

                $ativa.mouseenter(function () {
                    if ($elemento.hasClass('add-efeito')) {
                        return false;
                    } else {
                        $elemento.addClass('add-efeito');
                    }
                });
                $ativa.mouseleave(function () {
                    if ($elemento.hasClass('add-efeito')) {
                        $elemento.removeClass('add-efeito');
                    }
                });
            });
        </script>
        <style>
            div.elemento {
                background-image: url(https://orig00.deviantart.net/9a2c/f/2012/136/f/0/iphone_3_png_by_aleiitah-d4zz86b.png);
                z-index: 1;
                height: 311px;
                width: 165px;
                position: fixed;
                bottom: 0;
                left: 0;
                display: none
            }

            div.elemento.add-efeito {
                display: block;
                animation: efeito .5s
            }
            @keyframes efeito {
                from {
                    bottom: -35rem
                } to {
                    bottom: 0
                }
            }
}
        </style>
    </head>
    <body>
        <div class="mostra">Passe o mouse por cima</div>

        <div class="elemento"></div>
    </body>
</html>
1
  • 1
    Alguns erros tags que não foram abertas mas tem o fechamento. <html><head>
    – NoobSaibot
    Commented 6/02/2018 às 2:24

1 Resposta 1

2

Eu não sei como vai ser seu uso pra isso, mas da para fazer tudo só com CSS não precisa necessariamente de JavaScript.

Fiz a animação no ::after da div .mostra, assim vc não precisa de duas divs para fazer o efeito

OBS: Se vc tirar o mouse de dentro da janela do Browser, ou no casa aqui se vc tirar o mouse de dentro do Snippet a animação vai cancelar.

.mostra::after {
  content: "";
  background-image: url(https://orig00.deviantart.net/9a2c/f/2012/136/f/0/iphone_3_png_by_aleiitah-d4zz86b.png);
    z-index: 1;
    height: 311px;
    width: 165px;
    position: fixed;
    bottom: -35rem;
    left: 0;
    display: inline-block;
}

.mostra:hover::after {
  content: "";
  background-image: url(https://orig00.deviantart.net/9a2c/f/2012/136/f/0/iphone_3_png_by_aleiitah-d4zz86b.png);
  background-repeat: no-repeat;
  background-position: bottom left;
  animation: efeito 5s ease-in-out; /* aqui vc contra o tempo que a animação fica ativa */
  width: 100%;
  height: 100%;
  display: block;

}
@keyframes efeito {
    0% {
        bottom: -35rem;
    } 
    10% {
        bottom: 0;
    }
    90% {
        bottom: 0;
    }
    100% {
        bottom: -35rem;
    }
}
<div class="mostra">Passe o mouse por cima</div>

1
  • Irei coloque em uma secção no site que estou desenvolvendo pra interagir e ir testando algumas funcionalidades. Era nesse sentido mesmo que eu estava planejando. É Até melhor em css inclusive, valeu muito!
    – Jean Alves
    Commented 6/02/2018 às 14:42

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .