Hola!
No logro hacer un hover de 2 estados, les explico mejor lo que quiero hacer:
Mi idea es que los controles de un slider esten completamente ocultos, cuando se pase el mouse por el slider aparezcan los controles pero medio transparentes y al pasar el mouse por los controles en si, aparezcan ahora si con toda la opacidad.
Mi codigo es este:
Código HTML:
<div id="slider">
<div id="flechaderecha"><img src="img/flede.png"/></div>
<div id="flechaizquierda"><img src="img/fleiz.png"/></div>
<div id="imagen1"><img src="img/sliderimg.jpg"/></div>
</div>
Código:
#slider
{
height: 340px;
position: relative; /* lo necesito para superponer el nav al slider */
z-index: 0;
}
#flechaizquierda
{
/*
aca irian varias lineas de Widht Height left top etc
para posicionarla y darle forma redonda y sombra,
y en otra linea "#flechaizquierda img" para posicionar
la imagen dentro del div
*/
position: absolute;
opacity: 0;
transition: opacity .3s;
}
#flechaderecha
{
/*
aca irian varias lineas de Widht Height left top etc
para posicionarla y darle forma redonda y sombra,
y en otra linea "#flechaderecha img" para posicionar
la imagen dentro del div
*/
position: absolute;
opacity: 0;
transition: opacity .3s;
}
#imagen1:hover #flechaderecha, #imagen1:hover #flechaizquierda
{
opacity: .2;
}
#flechaderecha:hover, #flechaizquierda:hover
{
opacity: 1;
}
Bien, esto de arriba no funciona porque por lo que pude experimentar toqueteando el
"#divA:hover #divB" solo funciona si
#divB esta dentro de
#divA, si estan en el mismo nivel jerarquico, no funciona.
Por lo tanto si yo en vez de
"#imagen1:hover #flechaderecha" pongo
"#slider:hover #flechaderecha" funciona!.
Pero como
"#flechaderecha" esta DENTRO de
"#slider", este se superpone y el
"#flechaderecha:hover" no funciona mas porque el mouse solo reconoce al slider... que puedo hacer?
Desde ya muchas gracias!
Un saludo