Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 237
Localização: Florianópolis/SC
Contato:

efeito hover em qualquer elemento da pagina

24-01-2008 13:43

Acho que alguem ja teve este mesmo problema.

Criei um menu usando DIVs, com "class" (<div id="1" class="estilo">..</div>)

em uma folha css ai posso criar a classe

.estilo{ .. }

porem não aceita a class

.estilo:hover

pq não funciona o comando hover em divs, table, ou outra coisa, só funciona legal em items de link, como UL, LI, A... ai funciona

li:hover, ul:hover, a:hover.

mas achei um codigo que resolve, vou postar aqui pra vcs.

<script type="text/javascript"> function aplicarHover(){ for(i=0; i < arguments.length; i++){ document.getElementById(arguments[i]).onmouseover = function(){ this.className = this.className+" "+ this.className.split(' ').join('Over ')+'Over'; } document.getElementById(arguments[i]).onmouseout = function(){ var classes = ''; var novasClasses = this.className.split(' '); for(k=0; k < novasClasses.length; k++){ if(!novasClasses[k].match(/(Over)/)){ classes += ' '+novasClasses[k]; } } this.className = classes.substring(1); } } } </script>

Crie um estilo acrescentando "Over" para a class que deseja, ficaria assim

.estilo{ //classe normal font: 10px Verdana, sans-serif; } .estiloOver{  //classe para hover font: 12px Verdana, sans-serif; }

para nao executar a função em todas class do documento, deve ser especificado qual o id do elemento que deve receber a função hover

<body onload="aplicarHover('divtal','img_tal','table-tal')">   <div id="divtal" class="estilo"> agora esta div tem uma classe para qdo passar o mouse (estiloOver) </div>

Ps. não esqueça, nos elementos que deseja esta função, coloque uma id, e discrimine ela no onload na tag body
0
MIDZ.com.br
http://www.midz.com.br
Soluções Web
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

efeito hover em qualquer elemento da pagina

25-01-2008 11:38

Muito bom, bem prático o script e facilita bastante para usar o efeito hover.

Só lembrando que você usou no style: font, seria font-family.
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado