- 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上面的时候，我想要切换另外一张图片，鼠标移出的时候又显示原来的图片，应该怎么实现？望各位大佬不吝赐教。
来一个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事件，触发的时候改变图片地址。
$('#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}
- 其他相关推荐
- 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">Tooltip 方法 show. 这是一个 Tooltip 方法 hide. 这是一个 Tooltip 方法 destroy. 这是一个 Tooltip 方法 toggle. 这是一个 'am Header2 ">Tooltip 方法 options
- VB2005怎么实现鼠标悬停提示的？
- 请问在VB2005里然后实现鼠标悬停提示的？是不是在控件的MouseHover里？如果是那提示文本怎么实现？比如鼠标停留在某个button上时，提示“这是XXXX按键”谢谢！
- 怎么实现这种鼠标悬停效果？
- 我想在窗体上做个table,然后鼠标悬停在某个单元格时，鼠标附近出现相应的注解性文字。求个简单的案例
- img之优雅的切换
- *、img中有时会出现这样的需求：切换但动的img中的src属性 已知： 直接替换src中的路径，图片会直接显示 解决办法： 延时函数 源码： //延时添加超链接，实现前一个照片的淡出 //后一个照片的淡入 $("#pic").fadeOut(picPeriodOut); setTimeout(function() { $("#pic").attr("src",url);...
- jsp页面div浮动在<img>上面
- &lt;div style="width: 135px;height: 135px;"&gt; &lt;img src="12.jpg" alt="图片" width="135px" height="135px" class="img-rounded"/&gt; &lt;div style="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编程，就可以激活按钮的行为状态，让它在未激活和激活状态之间进行切换。如：&lt;button class="btn btn-primary" data-toggle="button"&gt;Single Toggle&lt;/button&gt;当单击时，会激活按钮，激活状态以深色背景显示。效果如...
- bootstrap切换导航栏
- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrap</title> <style type="text/css"> 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中切分，交替显示就不会了
- 鼠标悬停链接提示能显示图片 怎么实现？
- 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】- 鼠标悬停图片时切换查看器
- 鼠标悬停图片时切换查看器