亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

bootstrap怎么實現鼠標懸停在img上面之后切換照片

bootstrap怎么實現鼠標懸停在img上面之后切換照片

桃花長相依 2018-10-29 13:17:55
向各位大佬請教:<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上面的時候,我想要切換另外一張圖片,鼠標移出的時候又顯示原來的圖片,應該怎么實現?望各位大佬不吝賜教。
查看完整描述

2 回答

?
ibeautiful

TA貢獻1993條經驗 獲得超6個贊

來一個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-11-03
  • 2 回答
  • 0 關注
  • 3176 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號