Stop function when passing mouse/cell phone

Asked

Viewed 182 times

1

I have the following code: I would like to know some function that can stop the phone when passing the mouse for about 10 seconds, after the arrow is removed from above. Thanks 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
  • 1

    Some tags errors that have not been opened but have closure. <html><head>

1 answer

2


I don’t know how it will be used for this, but can do everything with CSS not necessarily need Javascript.

I did the animation on ::after of div .mostra, so you don’t need two divs to do the effect

OBS: If you take the mouse out of the Browser window, or in the house here if you take the mouse out of 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>

  • I’ll put in a section on the site I’m developing to interact and go testing some features. It was in that sense exactly what I was planning. It’s even better in css inclusive, it was worth a lot!

Browser other questions tagged php javascript html css

You are not signed in. Login or sign up in order to post.