鼠标滑过时更换图片的效果有很多方法可以实现，在本文将为大家介绍喜爱如何通过css来实现。<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS实现鼠标移动到图片，更换图片---www.jbxue.com</title> 
</head> 
<style type="text/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(/jscss/demoimg/wall_s1.jpg);}/*链接、点击后*/ 
.nav ul li a:hover{background:url(/jscss/demoimg/wall_s2.jpg);}/*鼠标经过*/ 
.nav ul li a:active{background:url(/jscss/demoimg/wall_s3.jpg);}/*点击时*/ 
</style> 
<body> 
<div class="nav"> 
<ul> 
<li><a href="#"></a></li> 
<li><a href="#"></a></li> 
<li><a href="#"></a></li> 
</ul> 
</div> 
</body> 
</html> 

CSS控制当鼠标滑过时更换图片的效果的更多相关文章

  1. jQuery实现的鼠标滑过切换图片代码实例

    jQuery实现的鼠标滑过切换图片代码实例:有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍 ...

  2. 兼容ie6及以上的表格行滑过时背景色切换的效果

    ;(function(window){    var tb = document.getElementById('tablelist');    function trfocus(){//为了兼容IE ...

  3. jQuery鼠标滑过横向时间轴效果

    jQuery鼠标滑过横向时间轴效果---效果图: jQuery鼠标滑过横向时间轴效果---全部代码: <!DOCTYPE html> <html> <head> & ...

  4. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  5. Unity UGUI在鼠标位置不同时 图片浮动效果

    /// <summary> /// 在鼠标位置不同时 图片浮动效果 /// </summary> public class TiltWindow : MonoBehaviour ...

  6. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

  7. CSS控制鼠标滑过时的效果

    用css控制鼠标样式的语法如下:<span style="cursor:*">文本或其它页面元素</span>把 * 换成如下15个效果的一种: 下面是对这 ...

  8. CSS实例：鼠标滑过超级链接文字时改变背景颜色

    先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #0 ...

  9. 兼容ie6及以上和firefox等标准浏览器的表格行滑过时背景色切换的效果

    一.js代码——"tablehover.js" /**      *②.表格单元行滑过时高亮样式动效组件封装      *oop形式封装交互动效类      *组件说明这个组件是为 ...

随机推荐

  1. C#.NET常见问题(FAQ)-如何引用定义好的dll文件

    1 添加引用,找到dll文件   2 引用类的名称空间,生成类的实例,调用类的方法,测试OK.     更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youku.com ...

  2. 字符串的公共前缀对Mysql B+树查询影响回溯分析

        年前项目组接微信公众号. 上线之后,跟微信相关的用cid列的查询会话的SQL变慢了几十倍!思考这个问题思考了非常久.从出现以来一直是我心头的一个结.cid这一列是建了索引的,普通的cid列更新 ...

  3. 87. 再谈变体型Variant

    在85. BASIC和LotusScript中的Variant一文中.我提到了BASIC风格的语言中的变体型Variant.由于下述种种原因.在LotusScript中常常要用到变体型. 1.     ...

  4. storm0.9.0.1升级安装

    来自:http://blog.csdn.net/liuzhoulong/article/details/21112101 1,下载0.9.0.1 http://storm.incubator.apac ...

  5. Phpcms之L()函数

    .phpcms\languages\zh-cn    中文语言包2.phpcms\languages\en    英文语言包 phpcms v9语言包建立  在phpcms v9二次开发之模型类的应用 ...

  6. JSONP简单例子

    jsonp的原理很简单,主要利用了HTML中所有有src的属性的标签可以跨域的特点,利用script的src进行get请求,后端输出一段js代码的字符串在script中便会执行. 当然后端输出普通的j ...

  7. Eclipse中jar包关联JDK源代码

    1.点 “window”-> "Preferences" -> "Java" -> "Installed JRES"2.此 ...

  8. while(cin>>word)时的结束方法

    有一个要注意的地方,以前不理解在while里面用cin >> val是什么意思,用这个当条件的话,通过检测其流的状态来判断结束: (1)若流是有效的,即流未遇到错误,那么检测成功: (2) ...

  9. 基于cancel的不全然恢复

    实验:基于cancel的不全然恢复 实验环境查看 lsnrctl status select open_mode from v$database;   --监听与数据库状态 show paramete ...

  10. 计算机顶级会议Rankings &amp;&amp; 英文投稿的一点经验

    英文投稿的一点经验[转载] From: http://chl033.woku.com/article/2893317.html 1. 首先一定要注意杂志的发表范围, 超出范围的千万别投,要不就是浪费时 ...