Как изменить ширину дочернего, обернутого div с анимацией перехода - PullRequest
Новая
       45

Как изменить ширину дочернего, обернутого div с анимацией перехода

3 голосов
/ 09 июля 2020

Как я могу анимировать изменение элемента width из .box div после наведения на .container? Переход, установленный на 1 с, отлично подходит для нового цвета фона, но не для ширины div. Что я делаю не так? 

.container {
  overflow: visible;
}

.container:hover .box {
  width: max-content;
  max-width: max-content;
  background: green;
}

.box {
  min-width: 100%;
  width: 100%;
  transition: 1s;
  overflow: hidden;
  background: red;
  height: 1rem;
  margin-top: 1rem;
}

.box-title {
  width: 100%;
  color: black;
  font-size: 0.9rem;
}
<div class="container" style="width: 100px; height: 100px; border: 1px solid red">
  <div class="box">
    <div class="box-title">Some long text that is not visible until you hover over it</div>
  </div>
</div>
...