鼠标悬停时，图片切换的方法

在我们写前端页面时，经常会遇到这种情况，就是鼠标悬停某个图标或者图片时，图片颜色发生了变化或者图片发生改变。
这种情况如何实现？

1、直接在html样式里进行切换

<div class="container"><img src="../img/icon-social-ip-white.png" onmouseover="this.src='../img/icon-social-ip-blue.png'" onmouseout="this.src='../img/icon-social-ip-white.png'" alt=""></div>

正常情况下我们的img标签只放一张图片，如果要实现鼠标悬停后图片发生改变，可以在标签里加上οnmοuseοver="this.src=’…/img/xxx’（切换后的图片） ,οnmοuseοut="this.src=’…/img/xxx’（鼠标移开后的图片），注意，路径不要写错了。
如图：

2、将背景图的路径改变

有时候我们会在css样式里引入图片；
只要将悬停后的图片路径改变就行了。

.bg{background: url(../img/icon-social-ip-white.png) no-repeat center;width: 25px;height: 23px;padding: 50px 50px;}
.bg:hover{background: url(../img/icon-social-ip-blue.png) no-repeat center;}

3、图片显示隐藏

<div class="bg"><img src="../img/icon-social-ip-white.png" alt=""><img src="../img/icon-social-ip-blue.png" alt=""></div>

.bg{position: relative;}img{display: block;width: 40px;height: 40px;position: absolute;}.bg img:last-child{display: none;}.bg:hover img:last-child{ display: block;}

4、图片透明度改变

.bg{position: relative;}img{opacity: 1;width: 40px;height: 40px;position: absolute;}.bg img:last-child{opacity: 0;}.bg:hover img:last-child{ opacity: 1;}

鼠标悬停时，图片切换的方法相关推荐

html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
Linux系统下实现图片切换的方法
目录第一个:代码实现过程第二个:具体现象大家好,今天分享一个,利用触摸屏驱动节点/event4,实现图片切换的方法. 使用源码包就是使用别人写好的函数:使用别人的函数,在编译的时候就必须知道函数 ...
html鼠标悬停停止旋转,html – 鼠标悬停时用css旋转图标
签出后我实现了下面的代码,但效果没有发生,不知道它缺乏的地方.. .rotate { -webkit-transition: -webkit-transform 0.4s ease-in-out; - ...
JS鼠标滑过图片时切换图片
http://www.aichengxu.com/article/Javascript/277_7.html 在很多网站上我们会发现当鼠标滑过一张图片后,这张图片切换为了另外的一张图片.这里豆芽说说这 ...
Vue中鼠标悬停更换图片/文字内容，动态展示/修改某些属性
Vue中鼠标悬停更换图片/文字内容,动态展示/修改某些属性鼠标悬停时:@mouseenter 鼠标离开时:@mouseleave 利用以上来绑定相应方法,例如: <div @mouseleav ...
20个超棒的CSS3图片切换灯箱效果教程推荐
CSS3中增加了诸多新的特性,借助这些特性,可以实现不可思议的效果.本文带来20个教程,教你如何使用CSS3创建引人注目的图片切换效果和灯箱效果. 点击小标题可以直接看效果 1. 创建带3D灯箱动画 ...
vue鼠标悬停更改图片
悬停 html <div id="app"><second></second></div> <template id=&quo ...
JavaScript之图片切换（类似淘宝商品图切换）
JavaScript之图片切换下边给出几种方法进行图片切换: 方法一(小白专用款!简单易懂) 下边附上代码: <!DOCTYPE html> <html lang="en ...
分享111个JS图片切换特效，总有一款适合您
分享111个图片切换,总有一款适合您下面是文件的名字,我放了一些图片,文章里不是所有的图主要是放不下..., 111个图片切换下载链接:https://pan.baidu.com/s/1iGzOzU ...