0

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.

.--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;}
 <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>

1 respuesta 1

1

Usas el pseudo selector has, el cual te permite seleccionar un padre que tiene hijos que cumplan con el selector que se pasa como argumento

#padre{
  background-color:red;
  width:100px;
  height:100px;
  padding:10px;
}

#hijo{
  background-color:blue;
  width:80px;
  height:80px;
}

#padre:has(#hijo:hover){
  background-color:gold;
}
<div id="padre">
 <div id="hijo"></div>
</div>

--anim.has(.content-tittle__tittle:hover){
  width: ...
} 

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.