Foros del Web » Creando para Internet » CSS »

heredar foco

Estas en el tema de heredar foco en el foro de CSS en Foros del Web. Buenas. Tengo el siguiente problema a ver si me pueden ayudar. Tengo un div que contiene un par de imagenes. y texto. Cuando el div ...
  #1 (permalink)  
Antiguo 19/08/2011, 10:03
 
Fecha de Ingreso: agosto-2010
Ubicación: Montevideo
Mensajes: 107
Antigüedad: 6 años, 4 meses
Puntos: 3
heredar foco

Buenas.

Tengo el siguiente problema a ver si me pueden ayudar.

Tengo un div que contiene un par de imagenes. y texto. Cuando el div contenedor obtiene el foco cambia el color de fondo. Pero me quedan los bordes de las imagenes contenidas del color original.

Entonces quiero que cuando la div contenedora tenga el foco también lo tenga su contenido, para así poder usar hover del contenido y corregir el problema.

No se si esto se puede hacer con CSS?

Pongo el código completo a ver si es más facil de entender así.

Saludos y gracias por su tiempo.

Código HTML:
Ver original
  1. <a class='link'  href='pepe.com/pepe'>
  2.  
  3.    <div class='contenedorl'>
  4.  
  5.        <img class='img_flotada_izquierda' >
  6.        <div class='texto'>Lo que sea</div>
  7.        <div class='icono_en_background_flotada_derecha'></div>
  8.  
  9. </div>
  10. </a>


Código CSS:
Ver original
  1. .contenedor {
  2.  
  3.     height:100px;
  4.     border-color:#7e817a;
  5.     border-style:none none solid none;
  6.     border-width:1px;
  7.  
  8.    
  9.     padding: 0 4px 0 10px;
  10.     margin-top:10px;   
  11. }
  12.  
  13. .contenedor:hover{
  14.     background-color:#dcddd8;  
  15. }
  16.  
  17. .link{
  18.     display:block;
  19.    
  20. }
  21.  
  22. .img_flotada_izquierda{
  23.     float:left;
  24.     margin:0px;
  25. }
  26.  
  27. .texto{
  28.    
  29.     padding:20px 0px 0px 110px;
  30.    
  31. }
  32.  
  33. .icono_en_background_flotada_derecha{
  34.     float:right;
  35.     height:101px;
  36.     width:101px;
  37.     background-image:url(../img/disponible.png);
  38.     background-position:top;
  39.    
  40. }
  41.  
  42. .icono_en_background_flotada_derecha:hover{
  43.     background-position:bottom;
  44. }
  #2 (permalink)  
Antiguo 19/08/2011, 11:10
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.580
Antigüedad: 8 años, 9 meses
Puntos: 899
Respuesta: heredar foco

primera el elemento <a> es de linea por lo que no puede contener en su interior elementos tipo bloquee como <div>

segunda... con css no puedes cambiar el src de una imagen necesitas javascript salvo que en su lugar coloques un <span> con la imagen de fondo y display block para que le puedas dar el ancho y alto de la imagen que necesitas


si este fuese el caso para usar el hover del padre y cambiar la imagen de fondo en el hijo usarías algo como

Código CSS:
Ver original
  1. .contenedor:hover span{...}
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 19/08/2011, 11:18
 
Fecha de Ingreso: agosto-2010
Ubicación: Montevideo
Mensajes: 107
Antigüedad: 6 años, 4 meses
Puntos: 3
Respuesta: heredar foco

Excelente Ag666!!!

Era lo que necesitaba. Te comento que la imagen no cambia según el foco lo que cambia es la posición background en la div con clase 'icono_en_background_flotada_derecha'. Por eso es justamente el caso del que hablas.

el elemento a esta como display: block, por ahora me funciona bien y es la única manera que encontré de que el link se active en poniendo el cursor en cualquier parte de la div contenedor. y no solo cuando paso sobre el texto o la imagen. No se si hay otra opción mejor?

Bueno excelente respuesta y muchas gracias por tu tiempo.
  #4 (permalink)  
Antiguo 19/08/2011, 12:36
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.580
Antigüedad: 8 años, 9 meses
Puntos: 899
Respuesta: heredar foco

a ok yo pensé que también querías afectar a la imagen que tienes arriba

Código HTML:
Ver original
  1. <img class='img_flotada_izquierda' >

y pues bueno como te comente no pueden ir objetos tipo bloquee dentro de uno tipo linea, como alternativa o usas javascript para lanzar el evento en lugar de un <a> o en lugar de <div> utiliza <span> y mediante CSS le das el atributo display:block para que se comporte igual que un div, claro que con esto pierde un poco de peso en cuestión de semantica
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....

Etiquetas: contenido, foco, fondo, heredar
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 03:32.