时间戳

首页 > 解决方案 > 当我悬停img标签以在他下方显示文本时如何制作动画

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

问题描述

当我悬停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;
}

标签： javascripthtmlcss

解决方案

利用.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>

推荐阅读