Foros del Web » Creando para Internet » CSS »

no funciona hover

Estas en el tema de no funciona hover en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/04/2009, 17:39
Avatar de rudy69  
Fecha de Ingreso: octubre-2008
Ubicación: espndeportes.com
Mensajes: 195
Antigüedad: 9 años, 1 mes
Puntos: 7
no funciona hover

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> 
  #2 (permalink)  
Antiguo 28/04/2009, 18:20
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: no funciona hover

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 original
  1. tbody td {
  2.   background: transparent;
  3.   text-decoration: none;
  4.   color: #363636;
  5.   }
  6. tbody td:hover {
  7.   background: #C2F64D;
  8.   color: #363636;
  9.   }

Nota: IE 6 no soporta esta caracteristica.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 28/04/2009, 18:46
Avatar de rudy69  
Fecha de Ingreso: octubre-2008
Ubicación: espndeportes.com
Mensajes: 195
Antigüedad: 9 años, 1 mes
Puntos: 7
Respuesta: no funciona hover

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
  #4 (permalink)  
Antiguo 28/04/2009, 19:38
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: no funciona hover

Ok, entonces intenta lo que te sugiero para ver si obtienes el efecto deseado.
__________________
- León, Guanajuato
- GV-Foto
  #5 (permalink)  
Antiguo 29/04/2009, 22:33
Avatar de rudy69  
Fecha de Ingreso: octubre-2008
Ubicación: espndeportes.com
Mensajes: 195
Antigüedad: 9 años, 1 mes
Puntos: 7
Respuesta: no funciona hover

vaya merda, funciona perfecto en firefox xD, joto IE
  #6 (permalink)  
Antiguo 30/04/2009, 03:34
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: no funciona hover

Cita:
vaya merda, funciona perfecto en firefox xD, joto IE
Bonita forma de decir ¡Gracias! Bastante original eh!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #7 (permalink)  
Antiguo 30/04/2009, 12:31
 
Fecha de Ingreso: abril-2009
Mensajes: 121
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: no funciona hover

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

noto que en muchos de tus hover no esta el punto
y eso influye :)
  #8 (permalink)  
Antiguo 30/04/2009, 23:09
Avatar de rudy69  
Fecha de Ingreso: octubre-2008
Ubicación: espndeportes.com
Mensajes: 195
Antigüedad: 9 años, 1 mes
Puntos: 7
Respuesta: no funciona hover

No se de que punto hablas, porque no pones un ejemplo como deberia quedar.
  #9 (permalink)  
Antiguo 01/05/2009, 02:34
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 952
Respuesta: no funciona hover

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
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #10 (permalink)  
Antiguo 02/05/2009, 17:31
Avatar de rudy69  
Fecha de Ingreso: octubre-2008
Ubicación: espndeportes.com
Mensajes: 195
Antigüedad: 9 años, 1 mes
Puntos: 7
Respuesta: no funciona hover

Ag666, eres un sabiondo amigo xD, me funciona perfectamente, muchas gracias!!!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:45.