wenjunlong88_easy 2018-06-16 05:48 采纳率: 75%
浏览 3492
已采纳

bootstrap怎么实现鼠标悬停在img上面之后切换照片

向各位大佬请教:

<div class="tab-pane fade in active" id="home">
        <img alt="xxxx" id="shouye_image1"
            src="assets/imgs/home/gis_u16.png" width=100% height=100%>
    </div>
    当鼠标悬停在img上面的时候,我想要切换另外一张图片,鼠标移出的时候又显示原来的图片,应该怎么实现?望各位大佬不吝赐教。
  • 写回答

8条回答 默认 最新

  • 关注

    来一个div容器class="img-box",position: relative , 然后里面的两个img 是position: absolute .


    然后给img-box添加一个伪类:hover , 具体代码就是 .img-box:hover .b{display:none} .img-box:hover .a{display:block}

    这是最简单的一种思路,不需要写js 就可以实现无缝切换。

    当然 还有JQ 等封装好的好看的效果和事件,mousedown啊,toggle啊,animate啊等等,里面还能写一些回调函数让效果更圆润啊之类。。。不过,css还是最简单的方法的

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(7条)

报告相同问题?

悬赏问题

  • ¥15 算法使用了tf-idf,用手肘图确定k值确定不了,第四轮廓系数又太小才有0.006088746097507285,如何解决?(相关搜索:数据处理)
  • ¥15 彩灯控制电路,会的加我QQ1482956179
  • ¥200 相机拍直接转存到电脑上 立拍立穿无线局域网传
  • ¥15 (关键词-电路设计)
  • ¥15 如何解决MIPS计算是否溢出
  • ¥15 vue中我代理了iframe,iframe却走的是路由,没有显示该显示的网站,这个该如何处理
  • ¥15 操作系统相关算法中while();的含义
  • ¥15 CNVcaller安装后无法找到文件
  • ¥15 visual studio2022中文乱码无法解决
  • ¥15 关于华为5g模块mh5000-31接线问题