鼠标滑过时更换图片的效果有很多方法可以实现，在本文将为大家介绍喜爱如何通过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. Windows 之 防火墙

          对于只使用浏览.电子邮件等系统自带的网络应用程序,Windows防火墙(firewall)根本不会产生影响.也就是说,用IE.OutlookExpress等系统自带的程序进行网络连接,防火 ...

  2. kinect v1+ ubuntu 配置问题

    从github上下载openni 以及 SensorKinect. install 之后 启动openni下的例子 NiViewer发生错误. Open failed: Failed to set U ...

  3. table设置表格有滚动条

    table 设置表格有滚动条. 少说多做,代码中有注释: <!DOCTYPE HTML> <html> <head> <meta http-equiv=&qu ...

  4. Codevs3008 加工生产调度

    题目大意:某工厂收到了n个产品的订单,这n个产品分别在A.B两个车间加工,而且必须先在A车间加工后才干够到B车间加工. 求如何安排这n个产品的加工顺序.才干使总的加工时间最短. 这里所说的加工时间是指 ...

  5. MariaDB删除重复记录

    不管是程序BUG,还是业务变更,重复数据这个老生常谈的问题,总是会出现.以下是我在MariaDB或是MySQL下处理的一些经验.在SQL Server中,使用窗口函数是很容易实现的.不过听说MySQL ...

  6. permission denied make_sock could not bind to address 81问题解决

    在apache中绑定非http标准端口时,一直出现如下的错误提示: [root@localhost ~]# /etc/init.d/httpd start Starting httpd: (13)Pe ...

  7. Loadrunner脚本编程（3）- 检查点，关联等函数

    http://www.360doc.com/content/10/0806/13/1698198_44078093.shtml 1．  错误预防和恢复 参数默认是用{}括起来的,但也可以指定用< ...

  8. highstock高级篇之股票分时图

    一直在用 highchart 在做图表,最近一段时间突然接到一活,需要用 highstock 帮客户完成一个股票K线图和分时图.虽然用法和 api上与 highchart 没什么区别,但还是研究一番做 ...

  9. 关于highstock横坐标的一些的一些说明(1)使用UTC时间

    highstock的数据格式采用的是[[时间,数据],[时间,数据],[时间,数据],[时间,数据]],而时间采用的是13位的毫秒值,如[1133136000000,69.66],采用的时间格式为UT ...

  10. Linux（CentOS）的server安装及配置图解（图文）

    CentOS,据说这个如今在server上装机量非常大. 安装的分区划分 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdXBpMnU=/font/5a6L ...