当我将鼠标悬停在 img 标签下以显示他下方的文本时如何制作动画

Question

当我将鼠标悬停在 img 标签下方以显示文本时，我需要制作动画（必须是缓慢地显示文本的动画），但这还不是全部。它还必须在文本显示时向下移动其他内容，并在文本消失时返回（何时不是）徘徊）。非常重要的是，显示的文本必须是动画的并且可以返回。我不在乎它是否适用于 jq 或 css 或两者都只需要工作。我是一个初学者，所以也许显然我只是没有看到它。HTML：    <div class="first-block"></div>    <div class="secend-block">        <div class="box">            <img src="/Test/beach.jpg" alt="beach" width="200px" height="200px">            <p>asdasdasssssssssssssssssssssss                asdddddddddddddddddddddd                asdaaaadsssssssssssadsadsdasd                adsssssssssssssssssadsadsadsa            </p>        </div>    </div>    <div class="third-block">        <h1>some content</h1>        <h1>some content</h1>        <h1>some content</h1>        <h1>some content</h1>    </div>CSS： .first-block{    width: 99%;    height: 100px;    background: #f10000;}.secend-block{    width: 99%;    height: auto;    background: #ffffff;}.secend-block .box{    width: 200px;    padding-top: 10px;    margin: 0px auto;}.secend-block .box p{    display: none;}.third-block{    width: 99%;    height: auto;    background: #4400ff;}

Answer 1

使用.class:hover

基本上，当.image悬停时，我们想要更改 的样式.text。CSS 查询.image:hover + .text选择该.text元素，该元素之前有一个图像悬停在该元素之前。

.image {

  width: 250px;

}

.text {

  max-height: 0px;

  overflow: hidden;

  

  transition: max-height 1s;

}

.image:hover + .text {

  max-height: 32px;

}

<div class="wrapper">

  <img class="image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />

  <p class="text">This is some text</p>

</div>

<div class="wrapper">

  <img class="image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />

  <p class="text">This is some text</p>

</div>