css - 悬停时调整div的大小

Question

我看过这个视频，但它似乎不起作用。 我需要将 div 高度 从 200px 调整到 250px，然后将 visibility: visible; 设置为第一个内的 div。 https://www.youtube.com/watch?v=Wb7TmUR5JJw

它对我不起作用有没有没有 jquery 的选项？

代码:

#album:hover{

    height: 250px;
    width: 250px;
    transition: All 1s ease-in-out;

}

Answer 1

你可以试试这个。悬停时，您的外部 div 会变大，内部 div 会出现。为了获得更好的效果，请在不悬停的情况下过渡到类。

html

<div class="outer">
  <div class="inner">
  </div>
</div>

CSS

div.outer {
  width: 200px;
  height: 200px;
  background: orange;
  transition: all 0.5s ease;
}
div.outer:hover {
  width: 250px;
  height: 250px;
}
div.inner {
  height: 50px;
  width: 50px;
  background: red;
  opacity: 0; //only for better effect
  visibility: hidden;
  transition: all 0.5s ease;
}
div.outer:hover .inner {
  visibility: initial;
  opacity: 1;
}