淘先锋技术网

首页 1 2 3 4 5 6 7

CSS可以用来控制网页中的样式和布局,其中之一就是可以用CSS来实现图片和文本的切换效果。

首先需要准备好两张不同的图片和对应的描述文本:

<div class="image-container">
<img src="image1.jpg">
<p>这是第一张图片的描述文本</p>
</div>
<div class="image-container">
<img src="image2.jpg">
<p>这是第二张图片的描述文本</p>
</div>

然后定义CSS样式,将图片的opacity属性设置为0,将文字的display属性设置为none,这样初始的时候图片是不可见的,而文字则会隐藏起来:

.image-container img {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.image-container p {
display: none;
transition: all 0.3s ease-in-out;
}

接下来,定义鼠标悬浮在图片上时的效果,在此时将图片的opacity属性设置为1,将文字的display属性设置为block,使得图片变得可见,文本也会显示出来:

.image-container:hover img {
opacity: 1;
}
.image-container:hover p {
display: block;
}

这样,当用户鼠标悬浮在图片上时,就可以看到对应的文本了。利用CSS的这个简单的技巧,可以实现很多有趣的网页效果。