CSS/JAVASCRIPT - AJUDA

CSS

JavaScript

10/01/2018

Galera, alguém sabe me dizer alguma opção que eu possa fazer..
Ao passar o mouse no cinza a tela do celular sobe.. só que a tela desce ao tirar o ponteiro de cima.
Gostaria de saber se teria como bloquear e eu conseguir direcionar o ponteiro em cima da tela do celular.

PS: Se tiverem algum exemplo similar, por favor me informar. desde já agradeço!

<!DOCTYPE html>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script>
        <title></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(img/smartphone.png);
                height: 25rem;
                width: 15rem;
                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>
		
        <a href="#"><div class="mostra"></div></a>
        <div class="elemento"></div>
Jean

Jean

Curtidas 0

Respostas

Jean

Jean

10/01/2018

Desculpe o duplo post, segue uma imagem
http://i64.tinypic.com/2yjso5v.png
GOSTEI 0
Raul Cesar

Raul Cesar

10/01/2018

Não compreendi direito, no caso voce, voce gostaria de passar o mouse me um elemento e ter uma interação hover com o mesmo?
GOSTEI 0
Pwcodigo

Pwcodigo

10/01/2018

Desculpe o duplo post, segue uma imagem
http://i64.tinypic.com/2yjso5v.png


O link não funcionou.
GOSTEI 0
Pwcodigo

Pwcodigo

10/01/2018

Galera, alguém sabe me dizer alguma opção que eu possa fazer..
Ao passar o mouse no cinza a tela do celular sobe.. só que a tela desce ao tirar o ponteiro de cima.
Gostaria de saber se teria como bloquear e eu conseguir direcionar o ponteiro em cima da tela do celular.

PS: Se tiverem algum exemplo similar, por favor me informar. desde já agradeço!

<!DOCTYPE html>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script>
        <title></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(img/smartphone.png);
                height: 25rem;
                width: 15rem;
                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>
		
        <a href="#"><div class="mostra"></div></a>
        <div class="elemento"></div>


Manda o link da imagem original
background-image: url(img/smartphone.png);
GOSTEI 0
Pwcodigo

Pwcodigo

10/01/2018

<!DOCTYPE html>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script>
<title></title>

<script type="text/javascript">
function elementoExibir(iddocss){
if(document.getElementById){
var el = document.getElementById(iddocss);
el.style.display= (el.style.display == 'none') ? 'block' : 'none';
}
}
window.onload = function(){
elementoExibir('elemento');
}

</script>

<style>
#elemento{
background-image:url(https://images.samsung.com/is/image/samsung/africa-pt-galaxy-j6-j600-sm-j600fzvaxfe-frontviolet-117376323?$PD_GALLERY_L_JPG$);
width: 900px;
height:700px;
diplay:none;
background-repeat:no-repeat;
background-size: 900ox 900px;
overflow:auto;

}


</style>

<button style='cursor: pointer;' onClick="elementoExibir('elemento')">Mostrar</button>
<div id="elemento">
</div>


GOSTEI 0
Pwcodigo

Pwcodigo

10/01/2018

<!DOCTYPE html>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script>
<title></title>

<script type="text/javascript">
function elementoExibir(iddocss){
if(document.getElementById){
var el = document.getElementById(iddocss);
el.style.display= (el.style.display == 'none') ? 'block' : 'none';
}
}
window.onload = function(){
elementoExibir('elemento');
}

</script>

<style>
#elemento{
background-image:url(https://images.samsung.com/is/image/samsung/africa-pt-galaxy-j6-j600-sm-j600fzvaxfe-frontviolet-117376323?$PD_GALLERY_L_JPG$);
width: 900px;
height:700px;
diplay:none;
background-repeat:no-repeat;
background-size: 900ox 900px;
overflow:auto;

}


</style>

<button style='cursor: pointer;' onClick="elementoExibir('elemento')">Mostrar</button>
<div id="elemento">
</div>




Eu sei que não tem nada a ver, como eu li rápido achei que para mostrar e ocultar, e depois de fica pesquisando e concluir o código foi ver que você queria outra coisa.
GOSTEI 0
POSTAR