Tengo una situación como la siguiente

.parent {
  width: 200px;
  height: 100px;
  padding: 25px;
  background-color: grey;
  
  transition: width 0.25s;
}

.parent:hover {
  width: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: blue;
}
<h3>Hover Over</h3>

<div class="parent">
  <div class="child"></div>
</div>

Necesito que el niño permanezca en el mismo ancho hasta que el padre complete su transición.

Sé que esto es posible con estilos absolutos. Vea el fragmento a continuación:

.parent {
  width: 200px;
  height: 100px;
  padding: 25px;
  background-color: grey;

  transition: width 0.25s;
}

.parent:hover {
  width: 300px;
}

.child {
  width: 200px;
  height: 100%;
  background-color: blue;
}

.parent:hover .child {
  width: 300px;
  
  transition-delay: 0.25s;
}
<h3>Hover Over</h3>

<div class="parent">
  <div class="child"></div>
</div>

El elemento actual para el que necesito esto es que tiene estilos relativos (100%), por lo que el fragmento anterior no funcionaría en mi caso. ¿Hay alguna forma de cambiar el fragmento anterior para que funcione con estilos relativos o hay otra forma de hacerlo?

0
Jack 28 feb. 2020 a las 04:19

2 respuestas

La mejor respuesta

Simplemente agregue la misma transición a la clase secundaria. Echa un vistazo a continuación:

.parent {
  width: 200px;
  height: 100px;
  padding: 25px;
  background-color: grey;

  transition: width 0.25s;
}

.parent:hover {
  width: 300px;
}

.child {
  width: 200px;
  height: 100%;
  background-color: blue;
  transition: width 0.25s;
}

.parent:hover .child {
  width: 300px;
  
  transition-delay: 0.25s;
}
<h3>Hover Over</h3>

<div class="parent">
  <div class="child"></div>
</div>

Si tiene que decir que .child tendrá el ancho del 100%, entonces realmente tendrá que seguir el ancho de su padre sin importar el ancho que sea. Para que tenga una transición de retraso, el .child debe tener un ancho inicial entonces. Pero si tiene que insistir en que el niño tenga un ancho del 100%, ¿es posible si puede usar JS / JQuery? Si es así, verifique el fragmento que tengo a continuación:

$(document).ready(function() {
  var width = $('.child').width();
  
  $('.child').css({
    'width': width
  });
  
  $('.parent').hover(function() {
    setTimeout(function() {
      $('.child').css({
        'width': 'calc(100%)'
      })
    }, 500)
  }, function() {
    $('.child').css({
      'width': width
    });
  });
});
.parent {
  width: 200px;
  height: 100px;
  padding: 25px;
  background-color: grey;
  transition: width 0.25s;
}

.parent:hover {
  width: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: blue;
  transition: .2s width 0.25s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Hover Over</h3>

<div class="parent">
  <div class="child"></div>
</div>
0
jmc 28 feb. 2020 a las 02:02

En realidad, es posible solo con CSS, aunque este es un método un poco sucio. Si cambia font-size a alguna number [px|em|etc.] en lugar de la propiedad width, esto permitirá que el tamaño de ambos cambie "independientemente".

El inconveniente de este método es que necesitará agregar otro elemento secundario (o ::before | ::after) con un font-size más razonable si desea mostrar algo de texto dentro de estos elementos, por lo que podría ser mejor para su Propósito de utilizar algunos JS como @jmc pero si no puede (o no quiere: p), esta podría ser la solución para usted.

.parent {
  font-size: 200px;
  width: 1em;
  height: 100px;
  padding: 25px;
  background-color: grey;
  
  transition: width 0.25s;
}

.parent:hover {
  font-size: 300px;
}

.child {
  width: 1em;
  height: 100%;
  background-color: blue;
  
  transition: width 0.25s;
}

.child:hover, .parent:hover > .child {
  transition: width 0.25s 0.25s linear;
}
<h3>Hover Over</h3>

<div class="parent">
  <div class="child"></div>
</div>
0
Evochrome 28 feb. 2020 a las 16:20