Skip to main content
se añadieron 229 caracteres en el cuerpo
Origen Enlace
infinit3Loop__
  • 3.6k
  • 2
  • 5
  • 20

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

css

 

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

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>
 

título editado
Enlace

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

Origen Enlace

Como modificar el padre de un elemento cuando este 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