鼠标指针经过时给图像加边框

如何在鼠标指针经过一个图像时，图像出现一个细线的边框呢？这里对这个问题给出一个回答。

先来看一下最终的效果，请读者将鼠标移动到图像范围内：

首先请注意：学习本文需要一定的CSS基础，必须对“CSS选择器”、“后代选择器”、“伪类”这几个基本概念有所了解。

这个效果如何实现最方便呢？如果对于CSS选择器理解不够深入，可能想到的方法是把图像放在a标记中，然后在设置a元素的边框，这样做会非常麻烦，我们现在来看一下更为方便的解决方法。

首先我们假设这个图片不需要连接到其他的页面，因此尽量不使用“a”标记，而是仅对“img”标记进行设置，CSS代码如下：

1 2 3 4 5 6 7

img{ padding:5px; border:1px white solid; } img:hover{ border:1px green solid; }

html代码当然非常简单，仅一句话：

1	<img src="cup.gif" />

效果如下：

如果使用Firefox浏览器的用户会发现这个效果和最上面的效果相同，因此，这样简单的几句话就实现了这个效果。然而这里对img标记使用了“:hover”伪类，因此使用IE 6浏览器的用户会发现，鼠标移动到图像范围内不会出现绿色边框。

那么应该如何解决呢？

在IE6中，只有“a”标记支持“:hover”伪类，因此必须从这里寻找突破口。首先改造HTML代码，也就是在图像的外面套上一个“a”标记，代码如下：

1	<a href="#"><img src="cup.gif" /></a>

接下来，为它编写CSS代码，核心要点是把原来应用于img标记的:hover伪类改在a标记上。

1 2 3

a img {padding:5px;} a:link img, a:visited img {border:1px white solid;} a:hover img,a:active img {border:1px green solid;}

如果对CSS选择器了解比较深入的读者，看懂这段代码是比较容易的，第1行的目的是使边框与图像之间有5个像素的空间，如果希望边框紧贴着图像，那么这行代码可以删除；第2行的作用是定义在鼠标没有经过时，设置边框为1像素宽白色实线，第3行的作用是定义当鼠标经过或者点击图像的时候，边框的颜色变为绿色。

因此需要读者必须熟悉CSS的选择器的含义和伪类的含义，特别是“后代选择器”的含义，在这里第2行和第3行中，把“img”写在“a:hover”的后面，就表示在a元素处于鼠标经过状态时，里面的图像被选中。

以上写法是完全符合标准CSS写法的，在Firefox中，也是可以正常显示的。然而，“倒霉催”的IE 6在这里又出问题了，它对于这种情况存在bug，好在已经有人找到了解决的方法，也就是在上面CSS代码的前面加一句话，最终的代码如下所示：

1 2 3 4

a:hover {color: #FFF;} a img {padding:5px;} a:link img, a:visited img {border:1px white solid;} a:hover img,a:active img{ border:1px green solid;}

这样，就可以同时适用用IE 6/IE7/Firefox了。

最后补充说明一点，如果你希望的效果是，平常状态没有边框，鼠标经过图像时出现某种颜色的边框，那么只需要将上面代码中，平常状态的边框颜色设置为背景的颜色，而不要去掉平常状态的边框，否则会发生跳动，视觉效果会变得不好。

此外，使用了“a”标记以后，鼠标经过图像时，鼠标指针会变成手的形状，如果希望仍然保持箭头指针，可以在“a:hover”中增加一条对鼠标指针的设置：“cursor:default;”即可。

需要仔细研究的读者可以下载本案例的页面代码：下载本文的案例源代码。