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

Question

向各位大佬请教：

<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上面的时候，我想要切换另外一张图片，鼠标移出的时候又显示原来的图片，应该怎么实现？望各位大佬不吝赐教。

Answer 1

来一个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还是最简单的方法的