Rollover con opacity y transition

aiwal · #1 (**permalink**) 03/01/2012, 14:06

Gente, cómo están!? tengo un problema a resolver y acudo a ustedes para solucionarlo de la mejor forma posible.
Se los explico:

Quiero hacer que cuando pases el mouse encima de un div, aparezca sobre él otro div de mayor tamaño, cambiando la opacidad en transición.

Tengo un código que hace que cambie el 'visibility' de hidden a visible, pero lo que necesito yo es que pase de 'opacity' 1 a 0 con transition.
Código:

Código:

<html> 
<head> 
<title>Untitled</title> 
<script language="Javascript"> 
function mostrar(nombreCapa){ 
document.getElementById(nombreCapa).style.visibility="visible"; 
} 
function ocultar(nombreCapa){ 
document.getElementById(nombreCapa).style.visibility="hidden";
} 
</script> 
</head> 
<body> 
<div id="capa1" style="position:absolute;width:100;height:100;top:100;left:100;background-color:blue"  onmouseover="mostrar('capa2')">Capa 1</div> 
<div id="capa2" style="position:absolute;width:100;height:100;top:100;left:100;background-color:red;visibility:hidden" onmouseout="ocultar('capa2')">Capa 2</div> 
</body> 
</html>

Como verán sé poco y nada de javascript asique acepto todo tipo de mejoras y opiniones al respecto.
También si es en lo posible que funcione en todos los browsers!

Muchas gracias por su atención. Saludos.

caricatos · #2 (**permalink**) 03/01/2012, 14:26

Hola:

Fíjate si esto te sirva: Rollover fundido.

Saludos