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

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>

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

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

 $('#shouye_image1')
    .mouseover(function(){
        this.src = '...';   // 改图片地址
    })
    .mouseout(function(){
        this.src = '...';   // 改图片地址
    });
#home{width:100px;height:100px;} #home .mouseover{display:none} #home:hover .mouseout{display:none} #home:hover .mouseover{display:block}
xxxx

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


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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Bootstrap实现瀑布流照片显示
Bootstrap照片的瀑布流实现瀑布流是我们在网站建设中经常需要实现的布局,好在一个非常好用的第三方插件 — Masonry已经为我们实现了。Masonry 官网Masonry Github地址以下是Masonry中参数的所代表的意义:参数itemSelector(必须):指定在布局中的哪些子元素会被使用columnWidth(必须):用来对其元素和网络,如果没有写,那么会自动选择第一个元素的wi
鼠标悬停提示怎么实现
想实现一个功能,鼠标在控件上悬停一段时间,自动出现提示rn就像,现ie工具栏上,在“停止”图标上停一会,自动出现文字提示rnrn想是用mousehover,可怎么做那出那个提示文字呢,谢谢rnrn不是在工具栏上,而是在窗口里,动态添加的控件上
最简单的鼠标悬停,实现下拉列表功能 bootstrap
//最简单的鼠标悬停,实现下拉功能,应用bootstrap框架的知识,不会bootstrap自己百度怎么使用                                                                                              触发器                              
bootStrap实现tab页切换
bootStrap可以简单方便的实现tab页面的切换 用法 通过data属性 可以无需写任何JavaScript来激活标签式或圆角式的导航, 只需在元素上简单的指定 data-toggle=”tab” 或 data-toggle=”pill”. 在标签 ul 添加 nav 和 nav-tabs 属性, 将应用Bootstrap标签样式. <ul class="nav nav-tabs">
使用bootstrap实现标签切换
代码如下 html代码部分 <ul id="myTab" class="nav nav-tabs"> <li role="presentation" class="active"><a href="#home" data-toggle="tab">首页</a></li> <li role="presentation"><a href="#profile">介绍</
BootStrap实现登录注册动态切换
BootStrap实现登录注册动态切换,实现图片的轮翻播放,
Bootstrap鼠标悬停图片遮罩特效
使用 Bootstrap 让鼠标悬停在图片上的时候,显示遮罩特效
Bootstrap鼠标悬停下拉导航总结
Bootstrap鼠标悬停下拉导航总结 以bootstrap.js未压缩版本V3.3.7为例。 Bootstrap的导航条为适应移动设备,都是click弹出二级下拉菜单,没有鼠标hover的特效; 所以为了实现鼠标hover弹出下拉菜单,提升网站用户体验和满足一般网站特效需求,将直接改动bootstrap的源码。 源码修改 找到下图,第908~913行: 修改为: $(d...
文本框鼠标悬停 添加提示 bootstrap
Bootstrap 实例 - 工具提示(Tooltip)插件方法 这是一个  show&quot;&gt;Tooltip 方法 show. 这是一个  Tooltip 方法 hide. 这是一个  Tooltip 方法 destroy. 这是一个  Tooltip 方法 toggle. 这是一个  'am Header2 &quot;&gt;Tooltip 方法 options
VB2005怎么实现鼠标悬停提示的?
请问在VB2005里然后实现鼠标悬停提示的?是不是在控件的MouseHover里?如果是那提示文本怎么实现?比如鼠标停留在某个button上时,提示“这是XXXX按键”谢谢!
怎么实现这种鼠标悬停效果?
我想在窗体上做个table,然后鼠标悬停在某个单元格时,鼠标附近出现相应的注解性文字。求个简单的案例
img之优雅的切换
*、img中有时会出现这样的需求:切换但动的img中的src属性 已知: 直接替换src中的路径,图片会直接显示 解决办法: 延时函数 源码: //延时添加超链接,实现前一个照片的淡出 //后一个照片的淡入 $(&quot;#pic&quot;).fadeOut(picPeriodOut); setTimeout(function() { $(&quot;#pic&quot;).attr(&quot;src&quot;,url);...
jsp页面div浮动在<img>上面
&amp;lt;div style=&quot;width: 135px;height: 135px;&quot;&amp;gt; &amp;lt;img src=&quot;12.jpg&quot; alt=&quot;图片&quot; width=&quot;135px&quot; height=&quot;135px&quot; class=&quot;img-rounded&quot;/&amp;gt; &amp;lt;div style=&quot;width: 135px;hei
div浮动到img上面
此时需要在外层有一个position的div, 如果没有,可以在外面加一层。 而在div与img的样式中加入绝对定位。 并且在div中加入z-index为2, img的z-index为1, 并且div为opacity为0.8 此时的div与img为兄弟元素,img也算是一种容器,所以一般是会流式摆放,加入绝对定位后,便可以重叠。 一般重叠的需要设定Z-index与opacity
HTML笔记(六)bootstrap之img
图片相关类 类 描述 .img-rounded 为图片添加圆角(IE8不支持) img-circle 将图片变为圆形(IE8不支持) .img-thumbnail 缩略图功能 .img-responsive 图片响应式(将很好地扩展到父元素) 在这张图中,可以看到thumbnail这个类提供的缩略图功能和响应式功能一样,都能使图片大小跟着浏览器框而变化,不过就
ae照片切换
ae照片切换
网页照片切换特效
html/css网页照片切换特效
FragmentTabHost的使用(上面切换)
FragmentTabHost的使用(上面切换) 效果:这是显示在上面       布局:           xmlns:tools= "http://schemas.android.com/tools"     android :layout_width="match_parent"     android :layout_height="match_parent
照片切换flash效果
不错的,可以为你的网页制作出来动态的效果,大家可以试试的yo
qt如何实现相册照片切换的动画效果
点下一张后不是直接setpixmap, 而是有一个渐变的过程,有淡入淡出的效果
Bootstrap动态切换选项卡
最近在写一个系统的首页,就是平常的一个顶部导航栏,上面有登录和注册两个按钮,点击按钮弹出相应的登录或注册框,为了方便交互,把登录和注册在一个选项卡里放着,每次用户不用回到顶部去点击,只需要在当前框点击就可切换,先看一下样子吧,如图所示: 用Bootstrap平时在写静态页面时,只需要把.active类给自己想要第一个展现的框就可以,而动态的时候并不能简单的在js代码中给自己想要第一个展现的框直接设
如何道鼠标悬停在ListBox的那个item上面了?
ListBox已经绑定了数据,鼠标停在上面的时候,我有什么办法知道停在哪一条数据上面呢?
bootstrap页头之后
给力的PHP框架视频教程:bootstrap框架
Bootstrap 状态切换
状态切换将单个按钮的 data-toggle 属性设置 button,或通过简单的JavaScript编程,就可以激活按钮的行为状态,让它在未激活和激活状态之间进行切换。如:&amp;lt;button class=&quot;btn btn-primary&quot; data-toggle=&quot;button&quot;&amp;gt;Single Toggle&amp;lt;/button&amp;gt;当单击时,会激活按钮,激活状态以深色背景显示。效果如...
bootstrap切换导航栏
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;bootstrap&lt;/title&gt; &lt;style type="text/css"&gt; div.d1{ padding-top:70px; } &...
Bootstrap鼠标悬停图片遮罩特效.zip
代码简介:Bootstrap鼠标悬停图片遮罩特效是一款基于CSS3实现的鼠标移到图片上显示遮罩显示文字信息。
Bootstrap第47课_鼠标悬停产生提示
清晰讲解Boostrap基础。
bootstrap 中popover的鼠标悬停下拉菜单效果
这两天想要做个类似前端网登陆后滑过头像显示个人信息的效果。期间遇到不少问题,记录下来方便以后查找。 html相关 1、为了实现通用性,我在元素上加上了mypop的class和contentdiv属性具体html代码如下 测试 contentdiv表示的是要显示的popover的div的id(或者其他jquery的选择也可以) 2、使自定义的显示div隐藏
怎么实现视图的切换?
我单文档程序,主窗口下切分了好几个视图,如图rn[img=https://img-bbs.csdn.net/upload/201503/10/1425955781_877162.png][/img]rn主窗口被分成View1,View2,View3,然后View3被切分成View3-1,View3-2.我现在想在View1中的按钮中,点击按钮1,把View3换成View4(View4也被切换成几个View),点击按钮2,View4又变成View3.就是说两个交替显示,但View1和View2不变,而且要一开始默认显示是View3.请问我改怎么写?大神们直接上代码吧。真诚地求教各位大神!我只会用CSplitterWnd在MainFrm.cpp中切分,交替显示就不会了
easySlider1.6里面怎么实现鼠标悬停停止滚动
如题
鼠标悬停链接提示能显示图片 怎么实现?
RTrn谁能给个JS特效啊
如何将div浮动在ul上面或img上面
请教下:rn rn rn rnrnrnrnrnrn rnrn rn rnrnrnrnrnrn rnrnrnrn因为是循环加载出来的,怎么样做才能使div2浮动在他下面ul上面?rn
Tuxeto上面部署环境之后报错
请大神帮忙看一下,如果可能给出详细的解决方法。rnrn下面是错误日志。rnrnrn110821.RYOHEI-C5C3C3B7!tmloadcf.3868.3872.-2: 04-20-2012: Tuxedo Version 8.1 32-bit Windows.rn110821.RYOHEI-C5C3C3B7!tmloadcf.3868.3872.-2: CMDTUX_CAT:879: INFO: A new file system has been created. (size = 1024 512-byte blocks)rn110823.RYOHEI-C5C3C3B7!tmloadcf.3868.3872.-2: CMDTUX_CAT:871: INFO: TUXCONFIG file C:\交易\系统\run\sale3\bin\tuxconfig has been createdrn110829.RYOHEI-C5C3C3B7!BBL.3984.3980.0: 04-20-2012: Tuxedo Version 8.1 32-bit Windows.rn110829.RYOHEI-C5C3C3B7!BBL.3984.3980.0: LIBTUX_CAT:262: INFO: Standard main startingrn110830.RYOHEI-C5C3C3B7!BBL.3984.3980.0: CMDTUX_CAT:6323: ERROR: Unlicensed System Binaryrn110830.RYOHEI-C5C3C3B7!BBL.3984.3980.0: LIBTUX_CAT:749: ERROR: Cannot unlock Bulletin Board, not the lockerrn110830.RYOHEI-C5C3C3B7!BBL.3984.3980.0: LIBTUX_CAT:250: ERROR: tpsvrinit() failedrn110830.RYOHEI-C5C3C3B7!BBL.3984.3980.0: CMDTUX_CAT:26: INFO: The BBL is exiting systemrn110830.RYOHEI-C5C3C3B7!tmboot.3932.3940.-2: 04-20-2012: Tuxedo Version 8.1 32-bit Windows.rn110830.RYOHEI-C5C3C3B7!tmboot.3932.3940.-2: CMDTUX_CAT:825: ERROR: Process BBL at directAserver failed with /T tperrno (TPESYSTEM - internal system error)rn110830.RYOHEI-C5C3C3B7!tmboot.3932.3940.-2: WARN: No BBL available on site directAserver.rn Will not attempt to boot server processes on that site.rn
鼠标悬停提示JS实现
从网上DOWN下来的鼠标鼠标悬停提示,用JS实现,可用于按钮提示和超链接提示作用。。留作自用
delphi实现鼠标悬停的效果
delphi怎么实现鼠标悬停的效果?
asp.net 实现鼠标悬停显示图片
想在asp.net 中实现,鼠标悬停在一个超链接上,然后该超链接所包含的图片可以显示出来,鼠标移开后消失。rn哪位英雄做过,请指教一下阿!
ajax+php实现的鼠标悬停打分
最近项目中用到了评分功能, 参考别人的实现开发了一个, 使用jquery的ajax提交。 提交后自动更新得分。 单独做了一个示例共享一下, 方便有需要的改用。
我在pictures box上面显示照片,但是照片如果被别的视窗盖在上面之后,照片就消失了...
我在pictures box上面显示照片,但是照片如果被别的视窗盖在上面之后,照片就消失了,请问要怎样解决??看我发上来的图就容易明白了。。。rnrn1.程式显示照片正常:rn[URL=http://img131.hotlinkimage.com/img.phpid=743857826][IMG]http://img131.hotlinkimage.com/thumb/743857826.jpeg[/IMG][/URL] rnrn2.照片被别的视窗盖在上面:rn[URL=http://img135.hotlinkimage.com/img.phpid=221353633][IMG]http://img135.hotlinkimage.com/thumb/221353633.jpeg[/IMG][/URL] rnrn3.上面的视窗移走之后照片就消失了:rn[URL=http://img122.hotlinkimage.com/img.phpid=346690916][IMG]http://img122.hotlinkimage.com/thumb/346690916.jpeg[/IMG][/URL]
CSS3鼠标悬停中英文切换导航.zip
CSS3鼠标悬停中英文切换导航是一款两种基于css3实现的鼠标悬停中英文切换导航菜单代码。
【HTML】- 鼠标悬停图片时切换查看器
鼠标悬停图片时切换查看器
相关热词 c# 标准差 计算 c#siki第五季 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池