CSS+HTML动手实战鼠标悬停效果
在这个实践中，我们将创建一个简单的网页，其中包含一个图像列表，当用户将鼠标悬停在任何图像上时，图像会变大并带有淡入效果。
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Hover Effect</title>
<style>
.img-container {
overflow: hidden;
display: inline-block;
}
.img-container img {
transition: transform 0.5s ease;
}
.img-container:hover img {
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="img-container">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="img-container">
<img src="image2.jpg" alt="Image 2">
</div>
<!-- 添加更多的 .img-container 和 img 元素以创建图像列表 -->
</body>
</html>在这个例子中，我们定义了一个名为 .img-container 的类，它使用 overflow: hidden; 来隐藏超出容器的部分，并使用 display: inline-block; 使图像容器内的图像水平排列。在 .img-container img 选择器中，我们设置了过渡效果，让图像在悬停时放大。在 .img-container:hover img 选择器中，我们定义了悬停状态下图像的样式，使图像以平滑的方式放大。
请确保替换 image1.jpg 和 image2.jpg 等图片路径为您实际的图片路径。您可以根据需要添加更多的 .img-container 元素和图片以创建图像列表。
评论已关闭