no funciona hover

rudy69 · #1 (**permalink**) 28/04/2009, 16:39

Alguien me puede explicar porque no funciona el hover

Código HTML:

<html>
<head>
<style>
table.datos {
  border-collapse: collapse;
  border: 1px solid #03476F;
  font: normal 11px verdana, arial, helvetica, sans-serif;
  color: #363636;
  background: #D5E7FB;
  }
caption {
  text-align: center;
  font: bold 18px arial, helvetica, sans-serif;
  background: transparent;
  padding:6px 4px 8px 0px;
  color: #03476F;
  text-transform: uppercase;
  }
.datos td, th {
  border: 1px dotted #03476F;
  padding: .4em;
  color: #363636;
  }

thead th, tfoot th {
  font: bold 11px verdana, arial, helvetica, sans-serif;
  border: 1px solid #03476F;;
  text-align: left;
  background: #4591AD;
  color: #FFFFFF;
  padding-top:3px;
  }
tbody td a {
  background: transparent;
  text-decoration: none;
  color: #363636;
  }
tbody td a:hover {
  background: #C2F64D;
  color: #363636;
  }
tbody th a {
  font: normal 11px verdana, arial, helvetica, sans-serif;
  background: transparent;
  text-decoration: none;
  font-weight:normal;
  color: #363636;
  }
tbody th a:hover {
  background: transparent;
  color: #363636;
  }
tbody th, tbody td {
  vertical-align: top;
  text-align: left;
  }
tfoot td {
  border: 1px solid #03476F;
  background: #4591AD;
  padding-top:3px;
  color: #FFFFFF;
  }
.odd {
  background: #E8F2FC;
  }
.minimo {
  background: #669933;
  }
.off {
  background: #FFFFFF;
  }
.cancelado {
  background:  #FF3300;
  }
tbody tr:hover {
  background: #FFD800;
  border: 1px solid #03476F;
  color: #FFFFFF;
  }
tbody tr:hover th,
tbody tr.odd:hover th {
  background: #E0FAC5;
  color: #FFFFFF;
  }
</style>
</head>
<body>
<table width="248" border="1" class="datos">
  <caption>
    tema
  </caption>
  <thead>
  <tr>
    <th width="78">aaaaaa</th>
    <th width="88">aaaaaa</th>
    <th width="60">aaaaaa</th>
  </tr>
  </thead>
  <tbody>
  <tr class="odd">
    <td>aaaaaa</td>
    <td>aaaaaa</td>
    <td>aaaaaa</td>
  </tr>
  <tr class="cancelado">
    <td>aaaaaa</td>
    <td>aaaaaa</td>
    <td>aaaaaa</td>
  </tr>
  <tr class="odd">
    <td>aaaaaa</td>
    <td>aaaaaa</td>
    <td>aaaaaa</td>
  </tr>
  </tbody>
</table>
</body>
</html>

Triby · #2 (**permalink**) 28/04/2009, 17:20

Sera porque no hay enlaces, solo tienes textos dentro de las celdas; si quieres que toda la celda cambie de color, entonces aplica el hover a la celda y no a un enlace:

Código css:

Ver originaltbody td {
  background: transparent;
  text-decoration: none;
  color: #363636;
  }
tbody td:hover {
  background: #C2F64D;
  color: #363636;
  }

Nota: IE 6 no soporta esta caracteristica.

rudy69 · #3 (**permalink**) 28/04/2009, 17:46

Bueno, no se mucho de css, y lo que he hecho ya es mucho xD, puedo vivir sin el hover, ese codigo lo saque de http://icant.co.uk/csstablegallery/ y desde que lo copie ya venia asi, sin el hover que funcionara, le he hecho cambios de colores y cosas asi para que se vea mas bonito xd

Triby · #4 (**permalink**) 28/04/2009, 18:38

Ok, entonces intenta lo que te sugiero para ver si obtienes el efecto deseado.

rudy69 · #5 (**permalink**) 29/04/2009, 21:33

vaya merda, funciona perfecto en firefox xD, joto IE

Calizman · #6 (**permalink**) 30/04/2009, 02:34

Cita:

vaya merda, funciona perfecto en firefox xD, joto IE

Bonita forma de decir ¡Gracias!

Bastante original eh!

MavSettings · #7 (**permalink**) 30/04/2009, 11:31

fijate si poniendo un "." sin comillas antes del style.

noto que en muchos de tus hover no esta el punto
y eso influye :)

rudy69 · #8 (**permalink**) 30/04/2009, 22:09

No se de que punto hablas, porque no pones un ejemplo como deberia quedar.

ArturoGallegos · #9 (**permalink**) 01/05/2009, 01:34

hola amigo el codigo que estas usando funciona correctamente en IE, solo que tu no le estas especificando la codificacion agrega esto en la primera linea de tu codigo y trabajara como dios manda

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

e igual si no te anda pruebate este codigo ya lo probe y me anda perfectamente

Código HTML:

<!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=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
.one{background:#FFFFCC;}
.two{background:#FFCCCC;}
.one th, .one tr:hover th{background:#0099FF;}
.one tr:hover{background:#CCCCCC;}
</style>
</head>

<body>
<table width="300" border="0" align="center" class="one">
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="two">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

cabe mencionar que esa obsión del hover en toda la fila aplica solo para IE7 e IE8, si lo requieres para versiones anteriores de IE habría que pensar en usar java o probar si con el famoso fix de IE se corrige aunque muchos dicen no es aconsejable usar ese fix ya que hace muy pesado el sitio

bueno pues suerte amigo y por aquí estare viendo tu progreso haber como te va

rudy69 · #10 (**permalink**) 02/05/2009, 16:31

Ag666, eres un sabiondo amigo xD, me funciona perfectamente, muchas gracias!!!