Stop function when mouse / cell pass

Question

Stop function when mouse / cell pass

Navigation

#1 by (2 votes)

1

I have the following code: I would like to know some function that can stop the cellphone by mouseover for about 10 seconds, after the arrow is removed from above. Thank you in advance!

<!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>

php javascript html css

asked by anonymous 06.02.2018 / 03:19

1 answer

Synchronize player and host movements The search for my DB placed in a listView (Arrayadapter) returns the address of the object and not the content

score 2 · Accepted Answer

I do not know how your use will be for this, but to do everything with CSS, you do not necessarily need JavaScript.

I made the animation in ::after of div .mostra , so you do not need two divs to make the effect

OBS: If you take the mouse from inside the Browser window, or in the house here if you take the mouse from inside the Snippet the animation will cancel.

.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>