Estabelecer tempo no hover

[marcosfj1]

Galera seguinte...tenho um menu dinamico que ao posicionar o mouse em cima do menu, aparece as opcoes

Mas esta extremamente rapido, e isso não é agravel, porque as vezes o cara não tem tanta habilidade com o mouse e acaba ficando perdido....então queria saber como estabelecer um tempo para este recurso de link o hover...no caso eu faço da seguinte forma

#menu_categoria li:hover ul, li.over ul { display: block; }

beleza ao posiconar o hover aparece la as opcoes....como eu poderia fazer para que só mostrasse apos 1 segundo por exemplo.

Eu sei q é possivel pois no submarino o menu não e tão rapido....alguém pode me dar alguma dica?

Olhando pela net vi q isso se faz com JavaScript, por uma funcao setTimeOut() mas não tenh ideia de como fazer ou aplicar no meu sistema, alguém podera me dar um dica, ou de preferencia um exemplo??

Valeu

[marcosfj1]

Bem infelizmente ngm aqui conseguiu me dar alguma ideia, mas eu mexendo na net e com a ajuda de um cara, consegui evoluir bastante, porem ainda não ta 100% por isso vim aqui mostrar meu progresso pra quem sabe assim, sendo mais claro alguém consiga me ajudar.

Vamos la

O q eu quero é o seguinte eu tenho uma lista de departamentos, ai quando o cara passa o mouse em cima do nome desse departamento abre-se em baixo um lista com cada marca referente aquele departamento. Bem isso esta funcionando, porem este processo de abrir estava muito rapido, queria q fosse mais assim, colocou o mouse em cima do nome do departamente e depois de uns 2 segundos abrisse as opcoes.

Pesquisando vi q tinha q ser utilizado um funcao JavaScript, a setTimeOut(); que é responsavel por setar um tempo para que a outra funcao JavaScript aconteca...bom ai seguindo o q um cara me passou eu fiz este controle, porem agora não esta mais abrindo as opcoes de marca....vou postar meu codigo para vocês verem como tudo é feito:

Primeiro o CSS:

#menu_categoria ul {     
    margin: 0;    
    padding: 0;   
    list-style: none;    
    width: 185px;  
        
}

#menu_categoria ul li { 
    position: relative;   
}

#menu_categoria li ul  {     
    position: relative;    
    left: 5px;    
    display: none; 
    padding:1px; 
}

#menu_categoria ul li a{ 
    display: block; 
    text-decoration: none; 
    color: #777; 
    background: #fff; 
    padding:4px;      
}


#menu_categoria ul {     
    margin: 0;    
    padding: 0;   
    list-style: none;    
    width: 185px; 
    /*border-bottom: 1px solid #ccc;*/  
        
}
#menu_categoria .itemOver li:hover ul, li.over ul { display: block; }

Eu fiz este CSS baseado em uma explicacao de um tutorial do Maujor, a unica coisa q tive que alterar foi esta ultima linha onde criei este itemOver para que controlasse o mostrar as opcoes por JavaScript Bom agora vem o java script:

<script language="JavaScript">

function mouse_over_menu(objDiv) 
{ 
        window.setTimeout(open_menu, 1500, objDiv );
} 
function open_menu(objDiv) 
{ 
        objDiv.className = 'itemOver'; 

}
</script>

Reparem que na funcao open_menu() eu chamo o itemOver....e na funcao mouse_over_menu() eu coloco q esta funcao será executada a cada 1500 milesegundos....esta foi a funcao q um amigo fez dizendo q daria certo Agora a geração do menu, que é feito de modo dinamico com PHP:

<div id="menu_categoria" class="boxed" >
  <h2 class="title">Departamentos</h2>
  <div style="margin:5px;" onmouseover="CHAMADA DA FUNCAO">
  
<?

    //
    $sql = "BUSCO DEPARTAMENTOS ATIVOS";
    $req = mysql_query($sql);

    //
    if (mysql_num_rows($req)) {

?>
    <ul class="semMargem" id="nav" >
      <?
    
    //
    while ($cp = mysql_fetch_array($req)) {
    
        //
        $nome = $cp['nome'];
        if ($cp['id_produto_categoria'] == $_GET['categoria'])
            $nome = '<b>'.$cp['nome'].'</b>';
                    
?>
   //ATRAVES DO LI MOSTRO TODOS OS DEPARTAMENTOS
      <li  ><a  class="categoria" href="?l=produto&amp;categoria=<?=$cp['id_produto_categoria'] ?>" title="<?=$cp['nome'] ?>" ><?=$nome ?></a></li>
     
<?

    //
    if ($cp['id_produto_categoria'] OR $_GET['categoria']) {
    
        //
        echo '<ul style="margin-bottom:5px;" >';
        
        
        $sql = "BUSCO TODAS AS MARCAS REFERENTES AOS DEPARTAMENTOS ";
        $req2 = mysql_query($sql);
        
        //
        while ($cp2 = mysql_fetch_array($req2)) {
            
            //
            $nome = $cp2['nome'];
            if ($cp2['id_produto_marca'] == $_GET['marca'])
                $nome = '<b>'.$cp2['nome'].'</b>';

?>
         //MOSTRO AS MARCAS QUE CADA DEPARTAMENTO POSSUI....AQUI ACONTECE A MAGICA OU SEJA quando O CARA PARA O MOUSE EM CIMA DE UM DEPARTAMENTO ESTA LINHA QUE SERÁ MOSTRADA
          <li ><a  class="marca" style="color:#06C;" href="?l=produto&amp;categoria=<?=$cp['id_produto_categoria'] ?>&amp;marca=<?=$cp2['id_produto_marca'] ?>" title="<?=$cp2['nome'] ?>" ><?=$nome ?></a></li>
<? 
    
        }
        
        echo '</ul>';
        
    }

?>
      
      
      <? } ?>
    </ul>

Como podem ver na DIV eu chamo a funcao....agora vem o problema: -Se eu chamo:

<div style="margin:5px;" onmouseover="open_menu(this);">

beleza passo o mouse sobre o nome do departamento, e aparece as marcas relacionadas a ele....porem claro não é setado o tempo para chamar a funcao -Mas se eu chamo:

<div style="margin:5px;" onmouseover="mouse_over_menu(this);">

OU seja chamei a funcao que chama a outra e determina um tempo para que seja executada...não FUNCIONA...ele simplesmente deixa de abrir as opcoes de cada departamento....então pra mim que não sei nada de JS mostra q o erro deve estar nessa funcao, mas não sei o q pode ser

alguém sabe me ajudar???? Queria muito conseguir fazer isso :(

Detalhe quando eu passo o mouse em cima do departamento, aparece uns erros na barra de status do IE e ao ver o que esta la é: 'undefined' é nulo e não é um objeto

POR FAVOR alguém ME AJUDA

[marcosfj1]

Olá

Bom pesquisando na net sobre isso de 'undefined' é nulo ou não é um objeto

E claro com a ajuda de um cara, percebi que a forma correta da funcao ser feita e acontecer o q eu queria era:

function mouse_over_menu(div_id) 
{         
    window.setTimeout("open_menu('" + div_id + "')", 2000);
} 
function open_menu(div_id) 
{         
    document.getElementById(div_id).className = 'itemOver';  
}

E depois chamar ela na DIV:

<div style="margin:5px;" id="div_dep" onmouseover="mouse_over_menu('div_dep');">

Bom funcionou exatamente como eu queria esperou 2 segundos em cima do DEPARTAMENTO antes de abrir...

Masss....

Tem um problema hehe

Eu tenho uma lista:

Departamento 1

Departamento 2

Departamento 3

Departamento 4

Departamento 5

Bom se eu paro no Departamento 3 ele espera o tempo certo q eu determinei....porem se eu mudo pro Departamento 4 ele já não espera...parece q não zera o tempo teria um jeito de zerar este tempo a cada chamada da funcao?

Será que alguém sabe me ajudar?

Valeu

[sebastiaocarvalho91]

Assim como tem o "onmousehover" há também uma coisa desse genero para quando o rato sai de cima. Acho que o problema está em usar sempre o mesmo setTimeOut em todos os menus, logo, se cancelar a função anterior com uma nova, chamada assim que o rato abandona o espaço, talvez já resulte.