css3 hover 改变图片

CSS3 hover 是一种常用的CSS技术，它可以在鼠标悬停在HTML元素上时改变元素的样式。其中，改变图片是CSS3 hover 的常见用途之一。

img src="picture_1.jpg" alt="图片1" width="300px" height="200px" class="picture">
    img src="picture_2.jpg" alt="图片2" width="300px" height="200px" class="picture">

以上是两张图片的标签，我们可以使用CSS3 hover 来实现鼠标悬停时替换图片。具体步骤如下：

.picture:hover {
        content:url(picture_2.jpg);
 /*鼠标悬浮图片更改为picture_2.jpg*/}

在上述代码中，我们首先使用 .picture:hover 选择器来指定当鼠标悬浮在图片上时要发生的变化。接着使用了 content 属性来更改图片的内容，具体即为将图片更改为 picture_2.jpg。

另外，我们也可以使用 background-image 属性来改变图片。例如：

.picture:hover {
        background-image:url(picture_2.jpg);
 /*鼠标悬浮图片更改为picture_2.jpg*/}
    

在上述代码中，我们将图片变成背景图，并使用了 background-image 属性来更改图片。

无论是使用 content 属性还是 background-image 属性，我们都可以让鼠标悬停时实现更多CSS效果，而不仅仅是更换一张图片。这需要我们对CSS3 hover有深入了解和灵活应用。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！