鼠标滑过时更换图片的效果有很多方法可以实现，在本文将为大家介绍喜爱如何通过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. 如何用7-zip创建自解压文件，7Z软件如何使用

    1 要创建自解压文件,一般都是双击直接解压到C盘的Program Files文件夹里面,或许还需要在桌面创建一个快捷方式之类的.但是一般的绿色软件除了复制到Program Files还需要运行一下绿化 ...

  2. ArcEngine10.x开发的许可问题

    1. ArcEngine9.x迁至ArcEngine10.x 相信很多同学都知道,在ArcEngine9.x下正常编译的代码到ArcEngine10.x会报错:ArcGIS version not s ...

  3. Linux获得命令帮助(学习笔记五)

    一.获得命令帮助 1.1.内部命令与外部命令 简单来说,在linux系统中有存储位置的命令为外部命令: 没有存储位置的为内部命令,可以理解为内部命令嵌入在linux的shell中,所以看不到. typ ...

  4. 解决-bash: fork: retry: Resource temporarily unavailable (修改最大线程数)

    错误提示的本质是Linux操作系统无法创建更多进程,导致出错.因此要解决这个问题需要修改Linux允许创建更多的进程. 方案一: cat /etc/security/limits.conf echo ...

  5. 简单说说Ubuntu利用bzr源码安装OpenERP7.0的操作步骤

    1.修改Ubuntu国内更新源,具体方法自己baidu.google. 修改更新源后,更新系统 sudo apt-get update sudo apt-get upgrade 复制代码 2.安装Po ...

  6. XML 文档结构必须从头至尾包含在同一个实体内

      XML 文档结构必须从头至尾包含在同一个实体内 CreateTime--2018年4月2日16:40:58 Author:Marydon 问题还原: <![CDATA[ <?xml v ...

  7. 如何从maven资源库下载jar包

      如何从maven资源库下载jar包 CreationTime--2018年6月7日09点00分 Author:Marydon 一.前提 需要安装并配置maven环境 二.准备工作 1.在桌面创建一 ...

  8. maven 创建web项目的标准目录结构

      maven 创建web项目的标准目录结构 CreateTime--2018年4月18日21:05:37 Author:Marydon 1.标准目录介绍(开发目录) 2.在eclipse下,目录展示 ...

  9. Codeforces554C:Kyoya and Colored Balls(组合数学+费马小定理)

    Kyoya Ootori has a bag with n colored balls that are colored with k different colors. The colors are ...

  10. java 和 C 代码运行效率的比较（整理）

    最近和朋友无意间讨论起了 有关java 和C 的 效率问题, (我是java 推介者, 他是 c 语言推介者, 他做的是嵌入式) 故,想通过网络查询一下, 总结一下,两者到底效率如何,其有何差异,原因 ...