css hover触发图片切换_后台图片地址前端hover切换-CSDN博客

本文链接：https://blog.csdn.net/weixin_43980047/article/details/108684726

今天弄一个图片切换，出了一些错误，网上也找了一下解决方法，所以来记录一下。
先看我简单写的css图片切换，然后再讲要注意的地方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
*{
    padding: 0;
    margin: 0;
}
.test{
        width: 200px;
        height: 200px;
    }
.test img:last-child{
    position: relative;
    top: -100px;
    margin: -20px 0 0 0;
    opacity: 0;/*设置透明度0->隐藏*/
    transition: all 0.3s ease-in;/*设置缓慢0.3秒出现的动画*/
}
.test:hover img:last-child{
    opacity: 1;
    }
</style>
<body>
    <div class="test ">
        <img src="./f2e73783cfb5ce21ed76e5a737aebda87fb323e1.jpg" alt="#">
        <img src="./cdab7f6e13032e00b08f74f39ac0c9f028cd4f34.jpg" alt="#">              
    </div>
</body>
</html>

实现效果就是：鼠标移动到div内，图片进行切换。
图片切换思路： 首先用:last-child定位到第二张img，你可以将img:last-child看作一个整体，这个整体就是指代第二张img，然后.test:hover img:last-child这句代码就容易理解了：当鼠标移动到div区域时，触发hover，hover作用在第二张图片的属性，作用了什么属性呢？就是第二张图片的透明度，我们最开始将透明度设置成了0（也就是看不见了），再给它设置数值为1，所以第二张图片就掩盖住了原来的图片，从而实现了图片切换。
值得注意的是： position: relative相对定位、top:-100px、margin:-20px 0 0 0;是用于调整两张图片重合在一起。当时少写了任何一个都无法重合，顶部总会留出20px无法重合。
**总结：**都写完了，写一下自己的感受，
首先要会用p:last-child选择器，在W3school中是这样描述的：选择属于其父元素最后一个子元素每个 <p> 元素。 在我的例子中就是选择test元素的子元素里面最后一个img。
随后就是前面写的调整两张图片容易出现的顶部无法重合。