Question

我看过这段视频，但似乎无法正常播放。我需要调整div高度from 200px to 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;
}

在悬停时调整div的大小

1 个答案: