css中悬浮显示图片怎么弄

在网页中，我们经常会看到很多图片，而有些图片并不是一开始就显示出来的，而是需要鼠标悬浮在某个区域上才会显示。这种效果在CSS中可以很轻松地实现。本文将介绍如何使用CSS实现鼠标悬浮显示图片的效果。
首先，需要用到CSS中的:hover伪类。这个伪类表示当鼠标悬浮在某个元素上时，应用的样式。因此，我们可以给需要鼠标悬浮显示图片的元素添加:hover样式，在此样式中控制图片的显示与隐藏。
接下来，我们需要准备两张图片。一张是鼠标不悬浮时显示的图片，另一张是鼠标悬浮时显示的图片。可以将这两张图片放在同一个目录下，并用img标签分别引用。
最后，我们需要用CSS将鼠标悬浮时显示的图片隐藏起来，并在:hover样式中将其显示出来。这里可以使用CSS中的display属性来控制显隐。
下面是实现代码：

/* 定义默认样式，即鼠标不悬浮时的样式 */
.img-container img:hover {
    display: none; /* 隐藏悬浮时显示的图片 */
}

/* 定义hover样式，即鼠标悬浮时的样式 */
.img-container:hover img:hover {
    display: block; /* 显示悬浮时的图片 */
} 

在上面的代码中，我们将图片放在了一个名为img-container的元素中。默认情况下，悬浮时需要显示的图片是被隐藏起来的。当鼠标悬浮在img-container上时，:hover样式生效，此时需要显示的图片会被显示出来。
需要注意的是，在实际应用中，还需要对图片的样式进行一些处理，比如调整大小、边距等。这些可以通过CSS中的其他属性来实现。
综上所述，通过使用CSS的:hover伪类和display属性，可以轻松地实现鼠标悬浮显示图片的效果。