完全用CSS实现鼠标移动到图片并更换图片

CSS实现鼠标移动到图片，更换图片，这是一个完全用CSS实现的效果，当然用JavaScript也可以实现，当把鼠标移动到图片的时候，图片自动更换为其它的图片，由此我们可以制作一些效果复杂的按钮，比如换色按钮。

CSS实现鼠标移动到图片，更换图片

*{ margin:0; padding:0;}
ul li{ list-style:none;}
.nav{ width:800px; height:40px; margin:150px auto;}
.nav ul li{ float:left; width:200px;}
.nav ul li a:link,a:visited{ display:block; width:190px; height:40px; background:url(http://zsrimg.ikafan.com/file_images/article/201212/picmove_1/wall_s1.jpg);}/*链接、点击后*/
.nav ul li a:hover{background:url(http://zsrimg.ikafan.com/file_images/article/201212/picmove_1/wall_s2.jpg);}/*鼠标经过*/
.nav ul li a:active{background:url(http://zsrimg.ikafan.com/file_images/article/201212/picmove_1/wall_s3.jpg);}/*点击时*/

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    赞 (0)

    相关推荐

    • 完全用CSS实现鼠标移动到图片并更换图片

      CSS实现鼠标移动到图片,更换图片,这是一个完全用CSS实现的效果,当然用JavaScript也可以实现,当把鼠标移动到图片的时候,图片自动更换为其它的图片,由此我们可以制作一些效果复杂的按钮,比如换色按钮. CSS实现鼠标移动到图片,更换图片 *{ margin:0; padding:0;} ul li{ list-style:none;} .nav{ width:800px; height:40px; margin:150px auto;} .nav ul li{ float:left; w

    • div+css实现鼠标放上去，背景跟图片都会变化。

      New Document ul{ list-style:none; } a{ padding-left:1.5em;font-size:12px;height:23px;line-height:23px;color:gray;text-decoration:none; } a:link,a:visited{ background:url(/article/upimages/bbs_bg_off.gif); } a:hover,a:active{ background:url(/article/u

    • 鼠标滑过缩略图时放大图片（纯Css）

      鼠标滑过缩略图时放大图片（纯Css）

      写着好玩的,并无技术含量,见笑了.没有使用到Js,纯Css控制的.弹出的图片不会把旁边的容器"挤"开. 测试通过IE7 Firefox2.11.(理论兼容IE6) www.jb51.net 我们 鼠标滑过缩略图时放大图片 本例旨在展示鼠标滑到缩略图上时,放大图片. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    • Vue.js鼠标悬浮更换图片功能

      Vue.js鼠标悬浮更换图片功能

      最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现. 首先将所有的选中后图片都覆盖到没选中图片上 html代码如下 <ul> <li> <a href=""> <img src="../../../img/goods/study.png" alt="学习"> <img class="h

    • 分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式

      废话不多说了,直接给大家贴关键代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t

    • vue 鼠标移入移出(hover)切换显示图片问题

      目录 鼠标移入移出(hover)切换显示图片 css实现 js实现 vue鼠标移入移出事件注意事项 发生冒泡事件 一.解决方法 二.定义 三.两对鼠标事件的区别 鼠标移入移出(hover)切换显示图片 css实现 代码: <div @click="exitConnect()" class="exit_hover">        <img class="exit1 mr10" :src="exit" styl

    • JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)

      本文实例讲述了JS+CSS实现鼠标经过弹出一个DIV框效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

    • JS+CSS实现鼠标滑过时动态翻滚的导航条效果

      JS+CSS实现鼠标滑过时动态翻滚的导航条效果

      本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用JavaScript实现的,不过代码好像是从jQuery里摘出来的,有点像. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-mouse-over-nav-scroll-style-codes/ 具体代码如下: <!DOCTYPE htm

    • JS鼠标滑过图片时切换图片实现思路

      在很多网站上我们会发现当鼠标滑过一张图片后,这张图片切换为了另外的一张图片.这里小编说说这是怎么实现的. 在写Javascript代码前我们必须要有实验的HTML代码 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Jquery deal images</t

    • css为图片设置背景图片

      CSS的功能是非常强大的,对于元素的表现以及页面的布局,都提供了非常强大的功能,这主要在于我们灵活的运行,在这方面提供了丰富且富含价值的各种教程与信息.对于图片的使用,其实更多的是在内容层.根据WEB标准的思路,表现层的图片,已经都被分离到CSS中去了.只有作为内容的图片才能以IMG标签插入在页面中,这也是一直强调的语义. 为图片设置背景图片,是一个非常搞的实例.这句话或许就感觉有点好玩.我们为以IMG标签引入页面的图片设置背景图片.这样的应用范围或许并不大,但可以锻炼你的思路,让你理解元素在H

    随机推荐