Saludos a todos. Mi problema es el siguiente:
Tengo unos vínculos hechos con un título en grande y debajo en pequeño una definición de ese título. Los etiqueto como <strong> y <dfn> respectivamente y los separo mediante un <br>.
Lo que quiero es que todo el vínculo que es blanco sobre fondo negro, pase a ser negro sobre fondo blanco al poner el cursor encima. Eso lo he conseguido con estos estilos:
a {
color: #FFFFFF;
text-decoration: none;
}
body {
background-color: #000000;
color: #FFFFFF;
font-family: Arial;
}
a:hover {
color: #000000;
background-color: #FFFFFF;
}
strong {
font-size: 36px;
line-height: 28px;
}
dfn {
font-size: 12px;
line-height: 12px;
}
y luego sólo tuve que poner el texto así:
<p><a href="#"><strong>esto es el titulo</strong><br>
<dfn>y esto una definicion</dfn></a></p>
El problema es que menos en explorer, en los otros navegadores utiliza el mismo fondo para las dos líneas, y la de arriba, al tener un texto muy grande, no se lee. Lo único que se me ocurrió poner fué añadir este estilo más:
strong:hover {
background-color: #FFFFFF;
}
pero no me acaba de convencer.
¿alguien sabría algún metodo mejor?
Gracias y saludos a todos.