[分享]css中hover如何显示图片

CSS中的hover伪类可以让鼠标移动到元素上时改变元素的样式，同时它也可以在鼠标移动到元素上时显示一张图片。下面是如何使用CSS的hover属性显示图片的方法：/HTML代码/ Hover to...

CSS中的hover伪类可以让鼠标移动到元素上时改变元素的样式，同时它也可以在鼠标移动到元素上时显示一张图片。下面是如何使用CSS的hover属性显示图片的方法：

/*HTML代码*/
<div class="box">
  <img src="image.jpg" class="image">
  <p class="text">Hover to display the image</p>
</div>

/*CSS代码*/
.box {
  position: relative;
}
.box:hover .image {
  display: block;
}
.image {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
.text {
  position: relative;
  z-index: 1;
} 

代码解释：

• 当鼠标移动到.box元素上时，.image元素会显示出来。
• .box元素需要设置为position:relative，这样.image元素才能相对于它定位。
• .image元素需要设置为display:none，因为一开始我们不希望它显示，只有当:hover伪类被触发时才会显示。
• 当.text元素和.image元素重叠在一起时，我们需要把.text元素的z-index设置为1，这样它就会显示在.image元素的上面。

希望这个例子能够帮助你在设计中使用CSS的hover属性展示图片，让你的页面更加生动有趣。