Wistain 2022-03-12 10:08 采纳率: 78%
浏览 227
已结题

怎么用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;
}

img


img


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

  • 写回答

3条回答 默认 最新

  • 你好!机器人 2022-03-12 10:19
    关注

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

    .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>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 3月20日
  • 已采纳回答 3月12日
  • 创建了问题 3月12日

悬赏问题

  • ¥15 爬取豆瓣电影相关处理
  • ¥15 手机淘宝抓清除消息接口
  • ¥15 C#无selenium
  • ¥15 LD衰减计算的结果过大
  • ¥15 用机器学习方法帮助保险公司预测哪些是欺诈行为
  • ¥15 计算300m以内的LD衰减
  • ¥15 数据爬取,python
  • ¥15 怎么看 cst中一个面的功率分布图,请说明详细步骤。类似下图
  • ¥15 为什么我的pycharm无法用pyqt6的QtWebEngine
  • ¥15 FOR循环语句显示查询超过300S错误怎么办