Todos los que empezamos en su día con las hojas de estilos (CSS), nos encantó la posibilidad de cambiar el "OnMouseOver" o el "OnMouseOut" para los TR o TD de las tablas y para los inputs de un formulario. Acogimos el A:HOVER con un cariño inmenso y por supuesto el TD:HOVER, TR:HOVER y otros muchos más.
Claro, que nuestro gozo en un pozo cuando vimos que Internet Explorer (el navegador más usado, y por tanto hay que tenerlo sin más remedio en cuenta) no aceptaba en algunos objetos este tipo de partícula CSS...
En internet he encontrado diferentes códigos que intentan que funcione en ambos navegadores, pero, y por error, me di cuenta que con las especificaciones en el html se subsanaba.
El código a incluir antes de HTML para que todo funcione es:
Con esta especificación XHTML el Internet Explorer 7 acepta, para HOVER, los mismos selectores (td, tr, input) que en Firefox, por ejemplo.
Si bien, algunas otras "costumbres" en html deben ser cambiadas, ya que por ejemplo el fácil centrado usando una tabla con una fila y una celda al 100% de ancho y alto y valign=center, con esta especificación, no funciona.
Un ejemplo de una tabla pautada y haciendo uso de HOVER en el tr es el siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo TR HOVER en IExplorer by Redalan.net</title>
<style>
#listado {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
border: none 0px solid;
border-collapse: collapse;
}
#listado tr#cabecera {
background:#000000;
color: #FFFFFF;
text-align: center;
}
tr#pautada {
background:#CCCCCC;
}
#listado tbody tr:hover {
background:#FFFF00;
cursor: default;
}
#listado tbody tr td {
padding: 5px;
}
</style>
</head>
<body>
<table id="listado">
<tr id="cabecera">
<td>hola1</td>
<td>hola2</td>
</tr>
<tbody>
<tr>
<td>holad1</td>
<td>holad2</td>
</tr>
<tr id="pautada">
<td>holad1</td>
<td>holad2</td>
</tr>
<tr>
<td>holad1</td>
<td>holad2</td>
</tr>
<tr id="pautada">
<td>holad1</td>
<td>holad2</td>
</tr>
</tbody>
</table>
</body>
</html>
Nota: La almohadilla se usa para hacer referencia a un ID en el selector y no al Class. Es decir....
<a class="enlace_blanco">Mientras que:
a#enlace_blanco {.....}haría referencia a
<a id="enlace_blanco">
3 comentarios:
gracias me fue muy util xD
Gracias: qué fácil me has solucionado un gran problema.
Mientras tanto en el año 2013...
Vaya que ha servido lo del doctype. Gracias!!
Publicar un comentario