CSS中可以使用伪类实现在点击图片时显示相关的文字描述。实现方法如下://HTML 代码 <div class= container > <img src=
CSS中可以使用伪类实现在点击图片时显示相关的文字描述。实现方法如下:
//HTML 代码 <div class="container"> <img src="img.jpg" alt="image" class="img" /> <p class="desc">这是一张美丽的风景图片。</p> </div> //CSS 代码 .container { position: relative; } .img { cursor: pointer; } .desc { position: absolute; top: 100%; left: 0; width: 100%; padding: 10px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 14px; text-align: center; opacity: 0; transition: all 0.3s ease-in-out; } .img:hover + .desc, .img:focus + .desc { top: calc(100% + 10px); opacity: 1; }
在HTML代码中,我们在一个容器中包含了一个图片和一个描述文字,给图片添加了一个class用于后面的CSS选择器。
CSS中,我们先给容器设定了相对定位,这是为了让绝对定位的描述文字可以根据容器定位。接着我们给图片添加了cursor: pointer属性,当鼠标移动到图片上时,光标会变为手型图标,提醒用户可以点击。
对于描述文字,我们使用了绝对定位并计算了top值为容器高度,这是为了让它可以正好显示在图片下方。同时,我们给描述文字设定了透明度为0,通过添加hover和focus伪类让它在图片被点击或悬停时才显示出来。使用opacity和transition属性实现了渐变动态效果。
综上,以上代码实现了当鼠标在图片上悬停或者点击时,在其下方显示与之相关的文字描述的效果。
粉丝
0
关注
0
收藏
0