Colorear palabra al pasar por encima del link.

erponcios · #1 (**permalink**) 08/02/2007, 23:27

Buenas gente, me gustaría saber si es posible hacer lo que os muestro en la imagen.

Me explico, tengo un texto en mi web, el cual quiero que al pasar por encima cambie de color el texto, pero además se cree como una especie de caja de fondo de un color plano.

Se que existe underline, bold, italic, strike... pero no se si hay una opción para lo que yo quiero.

Por cierto, si se pudiera hacer con divs, me podriais decir como sería? Es decir que al entrar en la palabra se coloreará el div de fondo.. porque es otra solución, lo que pasa es que el div no se ajustaría tan bien al tamaño como lo que yo quiero.

Un saludo.

MikiBroki · #2 (**permalink**) 09/02/2007, 02:31

Es muy sencillo. Este código hace lo del cambio de color. Ten en cuenta que según el ejemplo esto afectará a todos los enlaces de la página.

En cuanto a lo del div creo que sólo lo podrás hacer usando javaScript. Para ello pones en el enlace un ONMOUSEOVER en el enlace que llame a una función que cambie el color del div, y un ONMOUSEOUT que lo vuelva a dejar como estaba.

Código:

<html>

    <head>
        <style type="text/css">
            a:hover {
                color:red;
                background-color:red;
            }
        </style>
    </head>


    <body>
        <a href="#">hola qué tal</a>
    </body>

</html>

Salu2

erponcios · #3 (**permalink**) 09/02/2007, 04:37

Vale y una preguntita, si yo tengo el siguiente código:

Código:

<div align="justify" class="menus"> 

<a href="bandera.html">Bandera   central</a><BR>
<a href="capturar.html">Capturar la Bandera</a><BR>
<a href="atacar.html">Atacar y   defender</a><BR>
<a href="puente.html">El   puente</a><BR>
<a href="bunker.html">El Bunker</a><br>
<a href="vip.html">El VIP</a><BR>
<a href="escolta.html">Escolta</a><BR>
<a href="dominacion.html">Dominaci&oacute;n</a><BR>
<a href="defensiva.html">Dominaci&oacute;n defensiva</a><BR>
<a href="colina.html">La   colina</a><BR>
<a href="rescate.html">Rescate de   Rehenes</a><BR>
<a href="infiltracion.html">Infiltraci&oacute;n</a><BR>
<a href="buscar.html">Buscar y   conseguir</a><BR>
<a href="ultimo.html">&Uacute;ltimo hombre en   pie</a><BR>
<a href="escaramuza.html">Escaramuza por equipos</a>
 
</div>

en vez de llamar a todos las etiquetas a, como llamaría solo a la etiqueta a del estilo "menus"?

Un saludo.

Mikmoro · #4 (**permalink**) 09/02/2007, 05:22

No sé si quieres decir "solo a las etiquetas "a" dentro del div con estilo menús".
Si es así, lo deberías hacer poniendo:

.menus a:hover

en lugar de sólo a:hover

Mikel.

erponcios · #5 (**permalink**) 09/02/2007, 05:35

a eso me referia exactamente, gracias.