[SOLUCIONADO] Hover de 2 estados

[eltinchorz]

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

[siddartha23]

#slider:hover #flechaderecha {opacity: .2;}

Si luego de eso al pasar el mouse por #flechaderecha no puedes agregarle un evento hover es por que algo no está funcionando bien, igual tiene que reconocerlo para que funcione como un enlace al hacer click no???

[eltinchorz]

Como link si funciona, eso es lo extraño, por lo tanto el hover no tendria problema en ser detectado, ya que detecta el mouse y pone el cursor de link, pero el hover no se ejecuta, sera que css no puede ejecutar un codigo encima de otro? o simplemente que como el cursor siempre esta dentro de "#slider" sigue mostrando el .2?

[pzin]

Probablemente un problema con z-index. Quítale la opacidad a las cosas y pon un borde al pasar el ratón o algo así y cuando veas que eso funciona ya le pones la opacidad. Pero con esos niveles de opacidad probablemente no te des cuenta de qué elementos están encima y cuales debajo.

[eltinchorz]

Muchas gracias por responder gente!

Al probar lo que dijo pzin resulto que si se ponen dos propiedaes distintas funciona, por ejemplo un borde cuando se hace hover al slider y un cambio de color de fondo cuando se hace hover en la flecha en si, pero si pongo un borde cuando se hace hover al slider y le intento cambiar el color y el tamaño a ese mismo borde al hacer hover en la flecha en si no pasa nada, asi que asumo que no puede hacerse dos hovers simultaneos con una misma propiedad.
Como una solucion paliativa jugue con la opacidad y el atributo display, una lastima porque este atributo no se puede animar, pero creo que se quedara asi.

El codigo quedo de la siguiente manera:

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 CSS:

#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: .2;
   transition: opacity .3s;
   display: none;
}
 
#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: .2;
   transition: opacity .3s;
   display: none;
}
 
#slider:hover #flechaderecha, #slider:hover #flechaizquierda
{
    display: block;
}
 
#flechaderecha:hover, #flechaizquierda:hover
{
   opacity: 1;
}
 

Gracias por ayudarme!
Marco como solucionado
Saludos