heredar foco

[francap]

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:

<a class='link'  href='pepe.com/pepe'>
 
   <div class='contenedorl'>
 
       <img class='img_flotada_izquierda' >
       <div class='texto'>Lo que sea</div>
       <div class='icono_en_background_flotada_derecha'></div>
 
</div>
</a>
 

Código CSS:

.contenedor {
 
    height:100px;
    border-color:#7e817a;
    border-style:none none solid none;
    border-width:1px;
 
    
    padding: 0 4px 0 10px;
    margin-top:10px;    
}
 
.contenedor:hover{
    background-color:#dcddd8;   
}
 
.link{
    display:block;
    
}
 
.img_flotada_izquierda{
    float:left; 
    margin:0px;
}
 
.texto{
    
    padding:20px 0px 0px 110px;
    
}
 
.icono_en_background_flotada_derecha{
    float:right;
    height:101px;
    width:101px;
    background-image:url(../img/disponible.png);
    background-position:top;
    
}
 
.icono_en_background_flotada_derecha:hover{
    background-position:bottom;
}
 

[ArturoGallegos]

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:

.contenedor:hover span{...}
 

[francap]

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.

[ArturoGallegos]

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

Código HTML:

<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