Skip to main content
2 de 3
título editado

Como modificar un elemento padre cuando el elemento hijo este en estado hover?

Quiero realizar una animación (que aparezca una barra desde la izq); el elemento after esta sobre el padre de .content-tittle__tittle(cuando este elemento este en estado hover se tiene que realizar al animaccion).

Se que la solucion mas facil poner el width: 100% sobre el elemento padre --anim

Pero si hay una forma de lograr cambiar el width de --anim cuando "content-tittle__tittle" este en hover seria una gloria.

<section class="containerDT">
      <div class="content-tittle --anim --animToLeft">
        <h2 class="content-tittle__tittle">Actividades</h2>
        <h3 class="content-tittle__parroquia">Comunidad Centro</h3>
      </div>
<section>

html

.--anim::after {
content: "";
position: absolute;
bottom: 0;
width: 0;
height: 1px;
background-color: black;
transition: width 0.5s ease-in-out, left 0.5s ease-in-out; }

/* .--anim:hover::after {
width: 100%;} */


.content-tittle__tittle:hover{
.--anim::after & {
  width: 100%;} }


.--animToLeft::after {
left: 0;}

css