jQuery – efeito zebra com mouse hover na lista de elementos

script (não esquecer o import do jQuery):


/*
 * pre-requisito: import do jquery antes deste js.
 * 
 * */
var oldColor = '';
jQuery(document).ready(function() {	
	$('.zebra:even').css('background-color', '#ffffff');//faz o efeito da zebra nas linhas
	
	/*efeito hover ao passar pela linha*/
	$('.zebra').hover(function(){
		oldColor = $(this).css('background-color');
		$(this).attr('oldColor',oldColor);//seto atributo p/ funcionar em todos os navegadores
		$(this).css('background-color', '#81b9da');	//seta a cor do mouseover da linha
	},function(){
		$(this).css('background-color', $(this).attr('oldColor'));//restaura cor original na saida do evento
	});
});

adicione o class fake “zebra” na tag da linha:

<tr class="zebra">
   <td width="25%">linha</td>
</tr>

exemplo rodando http://www.ricardospinoza.xpg.com.br/exemplos/exemploZebra.html

Referência:
Api jQuery http://api.jquery.com/hover/

Deixe um comentário

Arquivado em HTML, JavaScript/Afins, jQuery

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s