Ir para conteúdo

POWERED BY:

Arquivado

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

pslucasps

[Resolvido] a:hover em Tabela

Por , em Desenvolvimento frontend

Recommended Posts

pslucasps    2

pslucasps
Postado

Pessoal vamos ao exemplo:

 

<table border='0' cellspacing='5' cellpadding='5' bgcolor='Green'>
 <tr>
  <td>Eu quero que essa linha</td>
  <td>fique com a cor Blue</td>  
  <td>quando eu passar o mouse em cima</td>
 </tr>
 <tr>
  <td>e o mesmo vai acontecer</td>
  <td>com essa linha quando</td>  
  <td>eu passar o mouse em cima</td>
 </tr>
</table>

conseguiram entender? Como eu faço para que quando eu passar o mouse em cima da linha ela mude a sua propriedade color. Obrigado.

 

OBS: Estou aprendendo WebStamdards, então por favor tenha paciencia, e além disso eu não pergundo antes de procurar e estudar. Estou estudando pelo Campus Online a princippio e depois partirei para o site do maujor. Mais dicas por favor me diga. Abraço.

 

PS: Não sei se esse é o titulo correto nem sei se usa esse método. Peço que qualquer coisa um Moderador modifique por favor e me desculpe pelo transtorno.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Fiz uma funçãozinha em Javascript aqui:

<html>
<head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#tableHover {
	background-color: #0f0;
	border: none; /* no lugar de border */
}
#tableHover td {
	padding: 5px; /* no lugar de cellspadding */
}
</style>
<script type="text/javascript">
window.onload = function () {
	var tableHover = document.getElementById('tableHover');

	var td = tableHover.getElementsByTagName('td');
	for( var i = 0; i < td.length; i++ )
	{
		td[i].onmouseover = function()
		{
			this.parentNode.style.backgroundColor = '#f0f';
		}
		td[i].onmouseout = function()
		{
			this.parentNode.style.backgroundColor = '#0f0';		
		}
	}
}
</script>

</head>
<body>
<table id="tableHover">
<tr>
  <td onmouseover="this.parentNode.style.backgroundColor='#f00';">Eu quero que essa linha</td>
  <td>fique com a cor Blue</td>  
  <td>quando eu passar o mouse em cima</td>
</tr>
<tr>
  <td>e o mesmo vai acontecer</td>
  <td>com essa linha quando</td>  
  <td>eu passar o mouse em cima</td>
</tr>
</table>
</body>
</html>
você poderia fazer com :hover tb, tomando cuidado que o IE6 não aceita esse pseudoseletor em outra tag, se não o a.

Compartilhar este post

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

Informação importante

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

  Aceito