鼠标移入后，图片变成另外的一张图片（1）| 直接给图片变色（只能变纯色）（2）

纯css

（1） 在鼠标移入后，让本来的那张图片变成另外一张图片，用到的是hover属性

        

 <a href=""><img src="../../public/image/h1.png" alt=""  style="width: 17%;" class="h1"></a>

<!--css里面-->

.h1:hover{
    content: url('../../public/image/h11.png');
}

选中前：         选中后：（这里我用的只是不同颜色的同一张图片）

（2）直接给图片换个颜色

        这里用到的是 CSS3 滤镜filter中的drop-shadow

        先给img的外面加个div，给div的css设置以下参数：overflow: hidden;text-indent: -92px;,再给img设置以下参数：filter: drop-shadow(92px 0px white)

三个参数分别代表：

水平向右移动92px，

垂直向下移动0px，

投射出的形状颜色为白色。

 <div class="h1">
       <a href="">
            <img src="../../public/image/h1.png" alt="" class="h11" class="h11" >
        </a>
 </div>
<!--css代码-->
.h1{
overflow: hidden;text-indent: -92px;
}
.h11{
    width: 17%;
    filter: drop-shadow(92px 0px white)
}

 原图：         阴影填色后：  

实习生每日小学习，嘿嘿~