向各位大佬请教：
<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上面的时候，我想要切换另外一张图片，鼠标移出的时候又显示原来的图片，应该怎么实现？望各位大佬不吝赐教。
浏览 3.4k
已采纳
bootstrap怎么实现鼠标悬停在img上面之后切换照片
- 写回答
- 好问题 提建议
- 关注问题
- 收藏
- 分享
- 邀请回答
微信扫一扫8条回答 默认 最新
- 前端的蜗牛 2018-06-27 09:05已采纳
来一个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还是最简单的方法的
已采纳该答案评论解决 无用打赏举报分享 - 丿叵测灬居心丶 2018-06-16 06:00
对这个图片绑定两个事件，mouseover和mouseout，移入的时候将图片地址替换掉，移除的时候在将图片地址替换回来
评论解决 无用打赏举报分享 - ambit_tsai-微信 2018-06-16 08:06
监听mouseover、mouseout事件，触发的时候改变图片地址。
$('#shouye_image1') .mouseover(function(){ this.src = '...'; // 改图片地址 }) .mouseout(function(){ this.src = '...'; // 改图片地址 });评论解决 无用打赏举报分享 - GoCityPass新加坡曼谷通票 2018-06-16 08:11
hover就行
<style> #home{width:100px;height:100px;} #home .mouseover{display:none} #home:hover .mouseout{display:none} #home:hover .mouseover{display:block} </style> <div class="tab-pane fade in active" id="home"> <img alt="xxxx" id="shouye_image1" src="https://csdnimg.cn/cdn/content-toolbar/dw.jpg" width=100% height=100% class="mouseout"> <img src="https://avatar.csdn.net/5/F/E/2_wenjunlong88_easy.jpg" width=100% height=100% class="mouseover"></div>评论解决 无用打赏举报分享 - 一卫二厨三室四厅五个窗户六个门 2018-06-16 08:29#home{width:100px;height:100px;} #home .mouseover{display:none} #home:hover .mouseout{display:none} #home:hover .mouseover{display:block}
评论解决 无用打赏举报分享 - qq_39805139 2018-06-19 04:27
css hover实现 或者用 jq 里面的鼠标点击时间更换图片
评论解决 无用打赏举报分享 - 前端的蜗牛 2018-06-27 09:08评论解决 无用打赏举报分享
- WHT5453 2018-07-01 15:29
这个可以通过鼠标的悬浮事件来进行处理，给图片添加该事件便可。
评论解决 无用打赏举报分享