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

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • ambit_tsai-微信 2018-06-16 08:06
    关注

    监听mouseover、mouseout事件,触发的时候改变图片地址。

     $('#shouye_image1')
        .mouseover(function(){
            this.src = '...';   // 改图片地址
        })
        .mouseout(function(){
            this.src = '...';   // 改图片地址
        });
    
    评论
  • 丿叵测灬居心丶 2018-06-16 06:00
    关注

    对这个图片绑定两个事件,mouseover和mouseout,移入的时候将图片地址替换掉,移除的时候在将图片地址替换回来

    评论
  • Go 旅城通票 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>
    
    评论
  • 关注
    #home{width:100px;height:100px;} #home .mouseover{display:none} #home:hover .mouseout{display:none} #home:hover .mouseover{display:block}
    xxxx
    评论
  • qq_39805139 2018-06-19 04:27
    关注

    css hover实现 或者用 jq 里面的鼠标点击时间更换图片

    评论
  • 关注

    
    
    评论
  • WHT5453 2018-07-01 15:29
    关注

    这个可以通过鼠标的悬浮事件来进行处理,给图片添加该事件便可。

    评论
查看更多回答(7条)

报告相同问题?

悬赏问题

  • ¥20 关于TRPD(波形特征)局部放电特征提取
  • ¥15 C语言快速排序函数纠错
  • ¥15 C#的一个应用程序书写
  • ¥65 页面调接口时加载卡住不响应
  • ¥35 用C语言解决编程问题
  • ¥15 unity硬件连接与使用
  • ¥15 鱼缸加热棒的数据分析或者实际案例也行
  • ¥15 postgresql11安装完成后,pgadmin无法启动
  • ¥15 (标签-无人机|关键词-Matlab代码)
  • ¥15 执行shell脚本提示参数太多