Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Hover de 2 estados

Estas en el tema de Hover de 2 estados en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/11/2014, 19:59
Avatar de eltinchorz  
Fecha de Ingreso: noviembre-2014
Ubicación: Buenos Aires
Mensajes: 11
Antigüedad: 9 años, 4 meses
Puntos: 1
Hover de 2 estados

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
  #2 (permalink)  
Antiguo 02/11/2014, 21:14
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 10 años, 5 meses
Puntos: 39
Respuesta: Hover de 2 estados

#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???
__________________
velarde23.com - Soluciones Web
  #3 (permalink)  
Antiguo 02/11/2014, 21:59
Avatar de eltinchorz  
Fecha de Ingreso: noviembre-2014
Ubicación: Buenos Aires
Mensajes: 11
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: Hover de 2 estados

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?
  #4 (permalink)  
Antiguo 03/11/2014, 11:25
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Hover de 2 estados

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.
__________________
(:
  #5 (permalink)  
Antiguo 03/11/2014, 13:09
Avatar de eltinchorz  
Fecha de Ingreso: noviembre-2014
Ubicación: Buenos Aires
Mensajes: 11
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: Hover de 2 estados

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:
Ver original
  1. <div id="slider">
  2.      <div id="flechaderecha"><img src="img/flede.png"/></div>
  3.      <div id="flechaizquierda"><img src="img/fleiz.png"/></div>
  4.      <div id="imagen1"><img src="img/sliderimg.jpg"/></div>
  5. </div>

Código CSS:
Ver original
  1. #slider
  2. {
  3.     height: 340px;
  4.     position: relative; /* lo necesito para superponer el nav al slider */
  5.     z-index: 0;
  6. }
  7.  
  8. #flechaizquierda
  9. {
  10.    /*
  11.        aca irian varias lineas de Widht Height left top etc
  12.        para posicionarla y darle forma redonda y sombra,
  13.        y en otra linea "#flechaizquierda img" para posicionar
  14.        la imagen dentro del div
  15.    */
  16.    position: absolute;
  17.    opacity: .2;
  18.    transition: opacity .3s;
  19.    display: none;
  20. }
  21.  
  22. #flechaderecha
  23. {
  24.    /*
  25.        aca irian varias lineas de Widht Height left top etc
  26.        para posicionarla y darle forma redonda y sombra,
  27.        y en otra linea "#flechaderecha img" para posicionar
  28.        la imagen dentro del div
  29.    */
  30.    position: absolute;
  31.    opacity: .2;
  32.    transition: opacity .3s;
  33.    display: none;
  34. }
  35.  
  36. #slider:hover #flechaderecha, #slider:hover #flechaizquierda
  37. {
  38.     display: block;
  39. }
  40.  
  41. #flechaderecha:hover, #flechaizquierda:hover
  42. {
  43.    opacity: 1;
  44. }

Gracias por ayudarme!
Marco como solucionado
Saludos

Etiquetas: estados, hover
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:17.