Enlaces hover... ¿los uso?

ixMike · #1 28-05-2008

Hola.

Estaba leyendo un cursillo de CSS, cuando me he encontrado con esta frase:

Cita:

Enlaces hover (Cuando el ratón está encima de ellos, solo funciona en ieplorer)

La cuestión es que eso lleva unos años escrito

, y no sé si sigue siendo correcto. Al menos en FireFox cuando paso el ratón por un enlace suele cambiar (depende de la página, claro), y lo que no sé es si usar ese ejemplo de enlaces "hover", o si hay alguna alternativa que esté más con la W3C, o si la práctica de enlaces hover ya se popularizó y ahora es compatible con todos los navegadores...

no sé, ¿alguien sabe algo?

Salu2, y gracias

[enecumene] · #2 28-05-2008

Hola, Claro que lo puedes usar y por suspuesto dependerá del diseño de tu web yo siempre los he usado, te dejo un ejemplo a ver si te funciona:

Código PHP:


			
<!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>


<style type="text/css">
/* CSS */
body {
    color:#E7E4E4;
    background-color:#CCCCCC;
}
/* El titulo tiene otro color suave para efectos del ejemplo */
h1 {
    color:#E6C3C3;
}
/* DISEÑO ACCESIBLE */
body.accesible {
    color: #000000; /* negro. También puedo poner black */
    background-color:#FFFFFF; /* blanco */
    /* font-size: 1.5em; */ /* aumenta tamaño de fuente */
}
/* si el H1 está en un body con clase accesible, también cambia */
.accesible h1 {
    color: #FD0404; /* rojo */
}
</style>
<script type="text/javascript">
function accesibiliza(){
    var body = document.getElementsByTagName("body")[0];
    var class_name = "accesible";
    var ya_tiene = new RegExp('\\b'+class_name+'\\b').test(body.className);
    if(ya_tiene){//ya la tiene. Remueve.
        var rep = body.className.match(' '+class_name)?' '+class_name:class_name;
        body.className = body.className.replace(rep,'');
    }
    else {//no tiene, agrega clase.
        body.className += " "+class_name;
    }
}
</script></head><body class="accesible">
     <h1>Miren mi estupendo diseño</h1>
    <p>
        Si puedes leer esto tienes buena vista.
    </p>
    <button type="button" onclick="accesibiliza()" id="bot-accesible">Accesibilidad</button>

</body></html>

Saludos.

Ñuño Martínez · #3 28-05-2008

Pues yo utilizo "a:hover" y sí funciona con Firefox y Konkeror. De hecho creo recordar que está documentado en la web del W3C.

Herramientas	Buscar en Tema
Mostrar Versión Imprimible Enviar por Correo	Buscar en Tema: Búsqueda Avanzada
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
Enlaces a pagina web con IE7	jorgegetafe	API de Windows	4	05-02-2007 16:45:43