首页用html,css编写一排六张图，一共两排，每张图片鼠标悬浮的时候都会出现对应的不同的另外一张图的效果代码

用html,css编写一排六张图，一共两排，每张图片鼠标悬浮的时候都会出现对应的不同的另外一张图的效果代码

时间: 2024-12-15 18:20:16 浏览: 11

你可以使用HTML结构来创建这个布局，并结合CSS来添加样式和交互效果。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .image-container { display: flex; justify-content: space-between; /* 每行图片均匀分布 */ flex-wrap: wrap; /* 切换到下一行 */ margin-top: 10px; } .image-row { width: 48%; padding: 5px; box-sizing: border-box; } .thumbnail { width: 100%; height: auto; cursor: pointer; transition: transform 0.3s ease-in-out; } .thumbnail:hover { transform: scale(1.1); } .hidden-image { opacity: 0; position: absolute; top: 0; left: 0; transform: scale(1); transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; } .thumbnail:hover + .hidden-image { opacity: 1; transform: scale(0.9) translateY(-100%); } </style> </head> <body> <div class="image-container"> <div class="image-row"> <img src="image1.jpg" alt="图1" class="thumbnail"> <img src="image2.jpg" alt="图2" class="thumbnail hidden-image"> <img src="image3.jpg" alt="图3" class="thumbnail hidden-image"> </div> <div class="image-row"> <img src="image4.jpg" alt="图4" class="thumbnail"> <img src="image5.jpg" alt="图5" class="thumbnail hidden-image"> <img src="image6.jpg" alt="图6" class="thumbnail hidden-image"> </div> </div> </body> </html> ``` 在这个例子中，我们创建了两个`.image-row`容器，每个里面包含三张`.thumbnail`图片。当鼠标悬停在 `.thumbnail`上时，显示与其相邻的`.hidden-image`。注意，你需要替换`src`属性为你实际的图片路径。

阅读全文