Ir para conteúdo

POWERED BY:

Arquivado

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

bcs_ptx

hover quando mouse passa

Por , em Javascript

Recommended Posts

bcs_ptx    0

bcs_ptx
Postado

Boa tarde pessoal, seguinte, tenho uma tabela que alterna as cores das linhas, mas quero colocar agora uma cor quando o usuário passa com o mouse por cima da linha, como faço isso?

 

<table>
   <tr bgcolor="#999999">
       <td width="300" class="fonte_texto">Nome</td>
   </tr> 

  <?php 
$i = 0;

if ($i & 1) {
 $color = "#CCCCCC";
}
else {
  $color = "#ffffff";
}
$i++
?>

  <tr>
     <td bgcolor="<?php echo $color; ?>" class="fonte_texto_normal"><?php echo $dados['nome2'];?></td>
  </tr>
</table>

 

tipo assim, se mouse estiver acima da linha cor tal se não $color, entendem?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

leia:

http://wbruno.com.br/2011/03/12/destacar-tr-de-tabela-zebrada-ao-passar-o-mouse-voltando-a-cor-original-ao-sair/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vih    2

Vih
Postado

tem um jquery

http://api.jquery.com/hover/

 

ex:

<html>
<head>
 <style>
 tr { cursor:default; }
 tr.active { background:blue;color:white; }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <table>
   <tr><td>Milk</td><td>Milk</td></tr>
   <tr><td>White</td><td>White</td></tr>
   <tr><td>Carrots</td><td>Carrots</td></tr>
   <tr><td>Orange</td><td>Orange</td></tr>
   <tr><td>Broccoli</td><td>Broccoli</td></tr>
   <tr><td>Green</td><td>Green</td></tr>
 </table>
<script>
$("tr")
.hover(
 function () {
   $(this).toggleClass("active")
     .next().stop(true, true);
 }
);

</script>

</body>
</html>

mas acho q o do William Bruno pode ser melhor...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vih    2

Vih
Postado

bom... tem varias formas com nth-child() da problema no ie8 (como sempre...), o js o usuario pode desabilitar mas funciona no ie8.

Compartilhar este post

Link para o post
Compartilhar em outros sites

JCMais    75

JCMais
Postado

Esse é o tipo de funcionalidade, que eu não implementaria outro código (às vezes mais complexos), apenas porque determinado IEca dá problema, visto que não é nada crucial para o bom funcionamento da página, é apenas mais um detalhe visual.

 

 

Do Websites Need to Look Exactly The Same in Every Browser?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vih    2

Vih
Postado

concordo com JCMais pq se for ficar prestando 100% de atenção no ie você vai ficar louco hsuahsua (y)

Compartilhar este post

Link para o post
Compartilhar em outros sites

bcs_ptx    0

bcs_ptx
Postado

blza gurizada, valeu pela resposta, mas seguinte, se eu colocar cores nas linha td bgcolor="cor", a hover não pega nas linhas, como fazer para ele passar mesmo por cima das linha com cores ja decididas?

 

quer ver o exemplo, peguei o exemplo que vcs postaram aqui, coloquei uma linha com cor cinza, quando o mouse passa por ela agora, não muda mais a cor cinza para azul.

 

<html>
<head>
 <style>
 tr { cursor:default; }
 tr.active { background:blue;color:white; }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <table>
   <tr><td bgcolor="#999999">Milk</td><td>Milk</td></tr>
   <tr><td>White</td><td>White</td></tr>
   <tr><td>Carrots</td><td>Carrots</td></tr>
   <tr><td>Orange</td><td>Orange</td></tr>
   <tr><td>Broccoli</td><td>Broccoli</td></tr>
   <tr><td>Green</td><td>Green</td></tr>
 </table>
<script>
$("tr")
.hover(
 function () {
   $(this).toggleClass("active")
     .next().stop(true, true);
 }
);

</script>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vih    2

Vih
Postado

fiz dessa forma

<html>
<head>
 <style>
 td,tr { cursor:default; }
 td.active,tr.active { background:blue;color:white; }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <table>
   <tr><td bgcolor="#999999">Milk</td><td>Milk</td></tr>
   <tr><td>White</td><td>White</td></tr>
   <tr><td>Carrots</td><td>Carrots</td></tr>
   <tr><td>Orange</td><td>Orange</td></tr>
   <tr><td>Broccoli</td><td>Broccoli</td></tr>
   <tr><td>Green</td><td>Green</td></tr>
 </table>
<script>
$("td,tr")
.hover(
 function () {
   $(this).toggleClass("active")
     .next().stop(true, true);
 }
);

</script>

</body>
</html>

assim quando você passar o mouse sobre a td ira mudar para azul e a linha toda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dii    15

Dii
Postado

...

 

Não é mais fácil assim?

 

tbody tr:nth-child(even) td, tbody tr.even td
{
  background-color: #eee;
}

 

Pronto, ficou zebrada. :huh:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Francis Schiavo    1

Francis Schiavo
Postado

Se é apenas para mudar a cor da linha quando o mouse estiver em cima de uma celula dela, basta utilizar:

tr:hover td {
 backgroud:#FF0000;
}

 

Isso altera a cor da td que está contida em uma tr que está sob o mouse.

Precisa ser feito um teste mais profundo, mas acho que isso é css2 e deve rodar em qualquer browser.

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