0

Como esconder ul ao clicar fora do menu ou passar o mouse fora do menu? Tentei mas não obtive sucesso.

function aperfil(opthard){
	if(document.getElementById(opthard).style.display== "none"){
		document.getElementById(opthard).style.display = "block";}
		else {document.getElementById(opthard).style.display = "none"}
		
		
		} 
<ul class="menup">

             <li><a href="#"><img src="img/icones/perfil.png" width="27" height="22"  alt="" onClick="aperfil('perfil');"/></a>
                <ul id="perfil" style="display: none; border:1px solid #5589c4; background-color:#fff;">
                      <li><a href="/painel/alt_pass.php">Alterar Senha</a></li>
                      <li><a href="/painel/suporte.php">Suporte</a></li> 
                      <li><a href="?go=sair">Sair</a></li> 
                        </ul>
            </li>
            </ul>

5
  • tente usar a função jquery onmouseout que representa que você retirou o mouse em cima do menu.
    – Marconi
    Commented 5/02/2016 às 13:57
  • @Marconi fiz o seguinte eu add <script language="javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.4/…> e aumentei o script $(document).ready(function() { $("#perfil").mouseout(function() { document.getElementById('perfil').style.display = 'none'; }); }); correto?
    – Gezer
    Commented 5/02/2016 às 14:40
  • 1
    Troque mouseout por onmouseout. Passe o mouse na imagem .w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover
    – Marconi
    Commented 5/02/2016 às 15:13
  • para mim ficou mais adequado <script>function aperfil(opthard){ if(document.getElementById(opthard).style.display== "none"){ document.getElementById(opthard).style.display = "block";} } <!-- ocultar o menu se passar o mouse fora necessita de jquery.min--> $(document).ready(function() { $("#perfil").mouseover(function() { document.getElementById('perfil').style.display = 'block'; }); $("#perfil").mouseout(function() { document.getElementById('perfil').style.display = 'none'; }); }); </script>
    – Gezer
    Commented 5/02/2016 às 15:27
  • Conseguiu? Vou postar uma resposta, só pra pergunta não ficar vaga.
    – Marconi
    Commented 5/02/2016 às 15:30

1 Resposta 1

1

Aqui no W3Schools tem um bom exemplo.

Repare que ao passar o mouse em cima da imagem é chamada a função bigImge quando retirado chama a função normalImg.

function bigImg(x) {
    x.style.height = "64px";
    x.style.width = "64px";
}

function normalImg(x) {
    x.style.height = "32px";
    x.style.width = "32px";
}
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt="Smiley" width="32" height="32">

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 .