怎么用CSS实现鼠标移动到图片上更换为另一张图片？

我通过hover更换了背景图片但是没有效果，应该是第一张图片没有设置为透明，但是该如何实现呢？

<div class="bottomBox1">
        <img src="5.png" class="lastImage1">
    </div>

.lastImage1{
    display: block;
    margin-left: 100px;
    margin-bottom: 10px;
}
.lastImage1:hover{
    background: url(6.png);
    cursor: pointer;
}

由图片可以看出只更改了鼠标样式。

这样改变不了，一个是图片类型引入，一个是背景引入，并不能替换。统一改成背景图

.bottomBox1{
         width: 300px;
         height: 300px;
        display: block;
        margin-left: 100px;
        margin-bottom: 10px;
        background: url(5.png);
    }
    .bottomBox1:hover{
        background: url(6.png);
        cursor: pointer;
    }

<div class="bottomBox1">
        <!--<img src="5.png" class="lastImage1">-->
    </div>

v-if判断吧

或者三元表达式

:hover因该可以实现。在hover的样式里加上!important 如果不想可以试试下面的方法

通过鼠标移入移出事件来控制单个元素的显示与隐藏或者给img的src双向绑定一个变量 修改变量的值达到效果！
如果对你有帮助的话，麻烦给个采纳啊，非常感谢