首页用html写一个鼠标放在文字上会出现相对应的图片

用html写一个鼠标放在文字上会出现相对应的图片

时间: 2023-08-22 14:08:20 浏览: 150

你可以使用HTML和CSS来实现此功能，代码如下： ```html <!DOCTYPE html> <html> <head> <title>Hover Text Example</title> <style> .container { display: flex; flex-wrap: wrap; justify-content: center; } .text { margin: 10px; padding: 10px; border: 1px solid black; font-size: 20px; text-align: center; position: relative; } .text:hover img { display: block; } .text img { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 200px; height: 200px; border: 1px solid black; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } </style> </head> <body> <div class="container"> <div class="text"> <p>Text 1</p> <img src="image1.jpg"> </div> <div class="text"> <p>Text 2</p> <img src="image2.jpg"> </div> <div class="text"> <p>Text 3</p> <img src="image3.jpg"> </div> </div> </body> </html> ``` 在这个例子中，我们使用了一个包含若干个文本框的容器。每个文本框都包含了一个文本段落和一个图片。文本和图片都被包含在一个带有相对定位的 div 元素中。当鼠标移到文本上时，对应的图片会显示出来。通过使用 CSS 中的 `:hover` 伪类和 `display` 属性，我们可以控制图片的显示和隐藏。图片被绝对定位在文本下方，并且通过 `transform` 属性和 `left` 和 `top` 属性进行居中对齐。

阅读全文