用CSS制作鼠标经过图像
以前我们用表格来布局网页时，我们都很喜欢用DW（Dreamweav）中的“鼠标经过图像”，因为那的确吸引人！但是我们也同样发现这样的一个问题：当网速不太快的时候，鼠标经过后的图片还没有下载下来，看上去很不美观。并且还需要一大堆的JS代码，还需要预载经过图片。相对来说比较麻烦！特别是对那些现在记事本来手工编写网页的朋友更是烦得很。事实上用CSS就可以解决这个问题，并且非常的简单，下载快，不会出现鼠标经过后的图片还没有下载下来这种情况。这个做法的原理很简单：就是用<a>标签的a:hover来触发鼠标事件，然后通过CSS来变化其背景的上下左右的位置。下面就主要分析一下用CSS来制作“鼠标经过图像”。
XHTML代码:
<li id="nav1"><a href="/" mce_href="/">nav1</a></li>
<li id="nav2"><a href="/" mce_href="/">nav2</a></li>
<li id="nav3"><a href="/" mce_href="/">nav3</a></li>
<li id="nav4"><a href="/" mce_href="/">nav4</a></li>
<li id="nav5"><a href="/" mce_href="/">nav5</a></li>
</ul>
这里用一个菜单来讲解，在实际运用中我们可能会有其它方面的运用。这里我们看到并没有图片，那是因为我们的图片都是用CSS调用的背景，而每个LI都有一个ID，那是因为这里的菜单图片是不同的！每个LI都有自己的菜单内容。
好了，现在需要把这个列表处理一下横向排放：
我们都知道<a>标签不是默认的块级元素，如果不是块级元素鼠标所感应的热区就不是我们所设定的长宽，而是其元素本身的大小。但CSS可以把其声明为块级元素。
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy5654')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy5654>#nav a { float:left; padding: 34px 0 0 0; overflow: hidden; height: 50px;}这里有一个很有意思的事！那就是，在这一句中有没有“display:block;”都是一样的。这里的“padding:34px 0 0 0;”是我们背景图的一半高度（注：背景图是把两张图片上下合在一起的图片）但是并不是用来控制背景图的,而是把<a>标签中的文字隐藏。由于触发动作并且移动位置是一样的，所以可以集中描述移动背影的位置。
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy4680')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy4680>#nav a:hover { background-position: 0 -34px;}这句的意思是：在#nav下的所有链接在鼠标经过时其背景向上移动34个像素。最后就是给菜单中的每一个链接加上背景图片。
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy4193')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy4193>#nav1 a {width:59px;background:url(btn_nav1.jpg) top left no-repeat;}#nav2 a {width:69px;background:url(btn_nav2.jpg) top left no-repeat;}
……
好了，完成，其中要注意的是：“padding:34px 0 0 0;”“#nav a:hover { background-position: 0 -34px;}” 需要根据自己的实际情况来设定值。
您可能感兴趣的文章：
jQuery 打造动态渐变按钮 详细图文教程
用CSS制作鼠标经过图像
CSS 循序渐进四表里春秋
图片和CSS制作动画按钮
CSS常见技巧及问题处理
CSS滑动门技术教程
jquery 图片Silhouette Fadeins渐显效果
CSS 控制图像不透明/透明度
基于JQuery的模拟苹果桌面Dock效果(稳定版)
基于jquery实现的鼠标滑过按钮改变背景图片