DIVs e onmouseout()

Outubro 23, 2008

Oi.

Estou com um problema aqui.

Quero detectar quando o mouse sai de cima de uma DIV, dentro dessa eu tenho outros objetos como links e textos, e eles são contados como se estivessem fora da div, mesmo com o mouse dentro dela, quando eu coloco o mouse em cima de um desses objetos a funçao onmouseout() é disparada.

alguém sabe a solução pro meu problema?

Obrigado pela atenção. Até mais.

KaKarotto · Outubro 23, 2008

Posta o js e o html do que você fez, pra gente dar uma olhada.

Aqueleabraço

Jonathan Queiroz · Outubro 23, 2008

Cara, posta aí o código pra ver se tem algum erro

Se não conseguir axar nenhum erro você pode fazer algo como isto até achar a solução:

<html>
<head>
<script type="text/javascript">
var variavel = false
function MouseFora() {
if (variavel!=true) {
alert("O mouse está fora da DIV Principal !!!")
}
}
</script>
</head>
<body>
<div onmouseout="MouseFora()">
DIV principal
<div onmouseover="variavel=true">
Sub-Divisão
</div>
DIV principal
</div>
</body>
</html>

Não chegei a testar aqui, mas é só pra entender o funcionamento

Outubro 24, 2008

divs no html

<div align="center" onmouseout="submenu('not')"> 
        <!--menu-->
        <div id="menu" align="center">
            <img src="s-img/menu-1.jpg"/>
            <div id="menuitens" align="left">
                  <a href="main.php" class="menulink" style="position:relative;left:30px" onmouseover="submenu('subhome');">Home</a> 
                  <a href="main.php" class="menulink" style="position:relative;left:60px" onmouseover="submenu('subblog');">Blog</a> 
                  <a href="main.php" class="menulink" style="position:relative;left:90px" onmouseover="submenu('subnews');">Notícias</a>
                  <a href="main.php" class="menulink" style="position:relative;left:120px" onmouseover="submenu('submusic');">Músicas</a>
                  <a href="main.php" class="menulink" style="position:relative;left:150px" onmouseover="submenu('subvideo');">Vídeos</a>
                  <a href="main.php" class="menulink" style="position:relative;left:180px" onmouseover="submenu('subimage');">Imagens</a>
                  <a href="main.php" class="menulink" style="position:relative;left:210px" onmouseover="submenu('subdownload');">Downloads</a>
            </div>
        </div>
    
    
        <!--submenu-->
        <div id="submenu">
       </div>

</div>

javascript

function submenu(type) {
        obj = document.getElementById("submenu");
        cpy = document.getElementById(type);
        obj.innerHTML = cpy.innerHTML;
    }

style das divs

#menu {
    width:1024px;
    height:30px;
    position:relative;
    top:auto;
    z-index:10020;
}

#submenu {
    background-color:#000000;
    position:relative;
    top:10px;
    width:1024px;
    height:30px;
}

É o seguinte: quando eu coloco o mouse sobre um dos links do menu aparece outros links no submenu, com o código acima esses links desaparecem quando eu tiro o mouse de cima dos links do menu principal (a função submenu('not') limpa o submenu). O que eu quero que os links que aparecam no submenu quando o mouse não estiver em cima de nenhum dos dois menus (ambos estão dentro de uma div da qual eu chamo o onmouseout()).

Obrigado pela ajuda. Até logo.

KaKarotto · Outubro 24, 2008

O código está incompleto, não tem como postar o link disso funcionando?

Eu acho que deve rever seu css...

Outubro 25, 2008

O código é meio comprido para ser poscto completo. Onde eu poderia hospeda-lo para que voce possa ve-lo emm funcionamento?

Fiz um código de um menu simples do mesmo modo que eu quero fazer:

main.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="style.css" />

&lt;script type="text/javascript">
    function submenu(type) {
        document.getElementById("nav-menu-sub").innerHTML = type;
    }
</script>

</head>

<body bgcolor="#333333"><center>
    
  <div id="nav-menu" onmouseout="submenu('')">
         <div align="left" id="nav-menu-main">
             <a href="main.php" style="position:relative;left:30px" class="nav-menu-linkA" onmouseover="submenu('home')">Home</a>      </div>
      <div align="left" id="nav-menu-sub">
      </div>
  </div>

    
</center></body>
</html>

style.css:

@charset "utf-8";
/* CSS Document */

body {
    margin:0px;
}

#nav-menu {
    position:relative;
    top:10px;
}

#nav-menu-main {
    background-color:#666666;
    height:30px;
    width:1024px;
}

#nav-menu-sub {
    background-color:#000000;
    color:#FFFFFF;
    height:30px;
    width:1024px;
}

a.nav-menu-linkA {
    top:5px;
    text-decoration:none;
    font-weight:bold;
    color:#FFFFFF;
}

a.nav-menu-linkA:hover {
    top:5px;
    color:#FF0000;
}

Eu quero que o texto "home" continue na barra de baixo mesmo quando o mouse sair de cima do link de cima, e só suma quando o mouse não estiver sobre nenhuma das barras.

Aguardando.

Entrar

DIVs e onmouseout()

Pergunta

Guest Matteus Kruegger

Link para o comentário

Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

KaKarotto

Link para o comentário

Compartilhar em outros sites

Jonathan Queiroz

Link para o comentário

Compartilhar em outros sites

Guest Matteus Kruegger

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

Guest Matteus Kruegger

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades