css点到图片会显示文字 |css 点击显示

在网站设计中，有时候需要让用户在鼠标点击某个图片时，出现相关的文字信息。这种需求可以使用CSS技术实现。下面大家来介绍一下实现这种效果的方法。 首先，需要在HTML文档中添加一个包含图片和信息的div容器。然后使用CSS的“display:none;”将该容器中的信息隐藏起来。接着，使用“:hover”选择器来监测图片是否被鼠标点击。如果是，则将信息重新显示出来。具体代码如下：

<style>
p {
text-align:center;
}
#container:hover #info {
display:block;
}
#info {
display:none;
text-align:center;
}
</style>
<p>点击下面照片</p>
<div id="container">
<img src="example.jpg" width="200" height="200" />
<div id="info">
<p>这是一张美丽的风景照片。</p>
</div>
</div>

在上述代码中，大家给容器“#container”和信息“#info”分别指定了CSS样式。在“#info”中，大家使用“display:none;”将信息隐藏起来。而在“#container”中，大家使用了“:hover”选择器来监测当鼠标在图片上时，将信息重新显示出来。 通过这种方法实现，当鼠标在图片上时，用户可以看到图片的详细信息，使网站更加友好和易用。同时，这种方法也可以运用到其他图片展示的场景中，具有很大的灵活性和实用性。