Crear rollover de capa...

markshock · #1 (**permalink**) 21/01/2008, 05:52

Hola amigos, vereis tengo el siguiente código CSS

Código HTML:

<div style="background:#665e59; width:133px; height:12px; text-align:center; margin:0 0 3px 0; padding:0 0 2px 0;"><a href="" class="linkBuscar">Productos</a></div>

Me gustaría que cuando pongo el ratón sobre Productos, el color de la capa cambiara, no consigo hacerlo sin hacerme la picha un lio anidando 3000 capas...

Un saludo y mil gracias de antemano.

safranero · #2 (**permalink**) 21/01/2008, 07:06

Hola, es muy facil, está solución es para firefox y para ie7

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>

<style type="text/css">

div.capa { width:200px; height:200px; background: blue; }

div.capa:hover { background:red }
</style>

</head>

    <body>
    	<div class="capa"></div>
    </body>

</html>

Como veras, le aplicas un estilo a la clase capa para una capa, y luego a esa misma clase le aplicas la pseudo-clase hover que se utiliza para acciones cuando el raton este sobre dicho elemento.

Espero que te sirva, un saludo.

markshock · #3 (**permalink**) 21/01/2008, 08:05

Cita:

Iniciado por safranero

Hola, es muy facil, está solución es para firefox y para ie7

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>

<style type="text/css">

div.capa { width:200px; height:200px; background: blue; }

div.capa:hover { background:red }
</style>

</head>


    <body>
    	<div class="capa"></div>
    </body>

</html>

Como veras, le aplicas un estilo a la clase capa para una capa, y luego a esa misma clase le aplicas la pseudo-clase hover que se utiliza para acciones cuando el raton este sobre dicho elemento.

Espero que te sirva, un saludo.

Joeeer.. mira q no caer en eso... ya me vale...!! muchas muchas gracias!!

safranero · #4 (**permalink**) 21/01/2008, 09:28

De nada, para eso estamos ;). Yo también he pasado por lo tuyo jaja