Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rafael_tst

Menu em CSS com javascript

Por , em Javascript

Recommended Posts

Rafael_tst    0

Rafael_tst
Postado

Olá a todos;Não sei nem como explicar o que preciso mais vou tentar:Bem, eu tenho um menu de listas com CSS, preciso de uma função que atrase a troca de stilo, por exemplo:Um link que quando passa o mouse em cima muda a cor da fonte, e quando tira o mouse ela volta a cor padrão, o que preciso é que mesmo quando tirar o mouse de cima demore alguns segundos para voltar ao padrão, tipo uns 2 segundos.Toda a parte de css eu sei fazer, mas não tenho nem idéia de como fazer esse "atraso" no CSS com JS.Se alguem puder me ajudar.Desde já agradeço a atenção de todos!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alex Hiroshi    7

Alex Hiroshi
Postado

Olá,

Primeiro você deve adicionar um evento nesse link, o evento onmouseout. Ele chamará uma função quando você retirar o ponteiro do mouse de cima do link.

Agora que você tem um uma forma de chamar a função que usará o setInterval, citado pelo Thiago, é só escreve-la.

Exemplo simples:

function espera(){	setInterval("document.getElementById('links').className='outra_cor'", 2000);		// depois de 2000 milesegundos (2 sec), ele troca a classe do link que possui o identificador 'links'}
Como eu falei, é simples, mas pode ser melhorado. É só para você ter uma idéia de como fazer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael_tst    0

Rafael_tst
Postado

Muito obrigado amigo;Mas ao tentar estou tendo problemas, vou passar detalhes;O que estou fazendo é um menu drop em CSS, o menu já está feito, então eu tenho uma div, que quando o mouse esta em cima dela desce o resto do menu, porém logo que se tira o mouse de cima o menu some, gostaria de fazer ele esperar tipo um segundo antes de sumir, eu testei o que você me passou e deu certo, porém não consegui montar isso no menu, tipo na div eu tenho um link e esse link quando "hover" faz o menu DISPLAY BLOCK, quando sai o menu ele fica DISPLAY NOME, como devo montar essa função para ele atrasar o o hidden do menu?A função ta certa , sou eu que não sei como usar...fiz um htm só para poder ilustrar melhor o que preciso, copie esse codigo salve ele como htm que vai entender:

<!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=iso-8859-1" /><title>Teste</title><style type="text/css"><!--body {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;}a.ajuda{  position:relative;   padding:0;  text-decoration:none;  cursor:help;   z-index:24;  }  a.ajuda:hover{  background:transparent;  z-index:25;   }  a.ajuda span{display: none}  a.ajuda:hover span{	display:block;	position:absolute;	width:175px;	top:3em;	text-align:justify;	left:-10px;	padding:5px 10px;	border:1px solid #999;	background-color:#FFFFCC;	color:#000;	text-decoration: none;	font-size: 10px;	font-weight: bold;  }--></style></head><body><div align="center"><a href="#" class="ajuda">Teste<span>Quero que depois de tirar o mouse de cima do link essa caixa continue aberta por mais um segundo</span>  </a></div></body></html>

Nesse exemplo o que preciso é que mesmo sem o mouse estar em cima do link ele mantenha o link como hover por determinado tempo, na função acima que o Lex postou depois de um intervalo ele muda a classe CSS do elemento mas não é bem isso que preciso, espero que tenham entendido.Desde já Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito