当我将鼠标悬停在 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 {&nbsp; width: 250px;}.text {&nbsp; max-height: 0px;&nbsp; overflow: hidden;&nbsp;&nbsp;&nbsp; transition: max-height 1s;}.image:hover + .text {&nbsp; max-height: 32px;}<div class="wrapper">&nbsp; <img class="image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />&nbsp; <p class="text">This is some text</p></div><div class="wrapper">&nbsp; <img class="image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />&nbsp; <p class="text">This is some text</p></div>