CSS控制当鼠标滑过时更换图片的效果

当鼠标滑过时更换图片的效果是一种常见的网页交互效果，可以带来视觉上的变化和动态性，提升用户体验。以下是实现CSS控制当鼠标滑过时更换图片的效果的完整攻略：

当鼠标滑过时更换图片的效果是一种常见的网页交互效果，可以带来视觉上的变化和动态性，提升用户体验。以下是实现CSS控制当鼠标滑过时更换图片的效果的完整攻略：

准备图片

我们需要准备需要展示的图片和鼠标悬停时需要切换成的图片。这里以两张图片为例：

<img class="img-default" src="default.jpg" alt="默认图片">
<img class="img-hover" src="hover.jpg" alt="鼠标悬停时展示的图片">

定义CSS样式

接下来我们需要定义CSS样式，包括图片的尺寸、位置、显示方式等等。具体代码如下：

img{
    width: 300px;
    height: 200px;
}

.img-hover{
    display: none;
}

.img:hover + .img-hover{
    display: block;
}

.img:hover{
    display: none;
}

以上代码中：

• 首先给图片设置了宽度和高度，以适配页面布局；
• 接着隐藏了鼠标悬停时需要展示的图片，使用display: none;
• 当默认图片被鼠标悬停时，使用相邻兄弟选择器 +，将鼠标悬停时需要展示的图片的显示方式修改为display: block;
• 同时隐藏默认图片，以展示新的图片。

示例说明

接下来看两个实际的例子。

示例1

<div class="img-wrapper">
    <img class="img-default" src="default.jpg" alt="默认图片">
    <img class="img-hover" src="hover.jpg" alt="鼠标悬停时展示的图片">
</div>

.img-wrapper{
    position: relative;
}

.img-default, .img-hover{
    position: absolute;
    top: 0;
    left: 0;
}

.img-hover{
    display: none;
}

.img-wrapper:hover .img-default{
    display: none;
}

.img-wrapper:hover .img-hover{
    display: block;
}

以上代码中，我们使用了position属性将图片绝对定位，并通过display来控制图片的显隐。当鼠标悬停时，我们利用父元素的:hover伪类对img-default和img-hover做不同的操作。

示例2

<div class="img-container">
    <a href="#">
        <img class="img-default" src="default.jpg" alt="默认图片">
        <img class="img-hover" src="hover.jpg" alt="鼠标悬停时展示的图片">
    </a>
</div>

.img-container{
    width: 300px;
    height: 200px;
    position: relative;
}

a{
    display: block;
    width: 100%;
    height: 100%;
}

.img-default, .img-hover{
    position: absolute;
    top: 0;
    left: 0;
}

.img-hover{
    display: none;
}

a:hover .img-default{
    display: none;
}

a:hover .img-hover{
    display: block;
}

以上代码中，我们将图片放在了一个a标签中，以便实现图片被点击后跳转的效果。为了让a标签和其内部的图片保持一致的大小和位置，我们对其父元素设置了固定的宽度和高度，并设置a标签为块级元素，并将其内部的img标签绝对定位。实现方式和示例1相近。

通过以上步骤，你就可以实现CSS控制当鼠标滑过时更换图片的效果了。