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

Question

我通过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;
}

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

Answer 1

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

.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>