Hola amigos, me estoy volviendo loco buscando algo de luz sobre esto y no encuentro nada, me gustaria simplemente eso, activar un efecto hover del hijo al hacer hover en el padre. Os dejo el codigo css, gracias!!!!
.servicios.et_pb_blurb_0.et_pb_blurb { padding-top: 70px; transition: all 0.2s ease-in-out; }
.servicios.et_pb_blurb_0.et_pb_blurb .et_pb_main_blurb_image { background-color: #a2bd30; border-radius: 150px; display: table; position: absolute; top: -140px; left: 50%; transform: translateX(-50%); transition: all 0.2s ease-in-out; }
.servicios.et_pb_blurb_0.et_pb_blurb h4 { padding-left: 15px; padding-right: 15px; }
.servicios.et_pb_blurb_0.et_pb_blurb .et_pb_blurb_content { padding-left: 15px; padding-right: 15px; padding-bottom: 20px; }
/-------PADRE-----------------------------------------------/ .servicios.et_pb_blurb_0.et_pb_blurb:hover { -webkit-box-shadow: 4px 4px 9px 1px rgba(0,0,0,0.75); -moz-box-shadow: 4px 4px 9px 1px rgba(0,0,0,0.75); box-shadow: 4px 4px 9px 1px rgba(0,0,0,0.75); }
/-------HIJO-----------------------------------------------/ .servicios.et_pb_blurb_0.et_pb_blurb .et_pb_main_blurb_image:hover { background-color: #0f2c41; -webkit-box-shadow: 4px 4px 9px 1px rgba(0,0,0,0.75); -moz-box-shadow: 4px 4px 9px 1px rgba(0,0,0,0.75); box-shadow: 4px 4px 9px 1px rgba(0,0,0,0.75); }
Respuestas
Buenas. Simplemente es añadir el efecto :hover al elemento padre de modo que el estilo del hijo solo se aplicará cuando el padre tenga un :hover. Te dejo el código completo:
.servicios.et_pb_blurb_0.et_pb_blurb { padding-top: 70px; transition: all .2s ease-in-out; } .servicios.et_pb_blurb_0.et_pb_blurb .et_pb_main_blurb_image { background-color: #a2bd30; border-radius: 150px; display: table; position: absolute; top: -140px; left: 50%; transform: translateX(-50%); transition: all 0.2s ease-in-out; } .servicios.et_pb_blurb_0.et_pb_blurb h4 { padding-left: 15px; padding-right: 15px; } .servicios.et_pb_blurb_0.et_pb_blurb .et_pb_blurb_content { padding-left: 15px; padding-right: 15px; padding-bottom: 20px; } .servicios.et_pb_blurb_0.et_pb_blurb:hover { -webkit-box-shadow: 4px 4px 9px 1px rgba(0, 0, 0, 0.75); -moz-box-shadow: 4px 4px 9px 1px rgba(0, 0, 0, 0.75); box-shadow: 4px 4px 9px 1px rgba(0, 0, 0, 0.75); } /* Al hacer un :hover sobre el elemento padre, se aplica un estilo sobre su hijo */ .servicios.et_pb_blurb_0.et_pb_blurb:hover .et_pb_main_blurb_image { background-color: #0f2c41; -webkit-box-shadow: 4px 4px 9px 1px rgba(0, 0, 0, 0.75); -moz-box-shadow: 4px 4px 9px 1px rgba(0, 0, 0, 0.75); box-shadow: 4px 4px 9px 1px rgba(0, 0, 0, 0.75); }
@unai001