« 第11课 高级网页元素样式 | 第12课 圆角设计 »

回答读者提问(14)——鼠标指针经过时给图像加边框

来自广西的杨金雄读者提出了一个问题，如何在鼠标指针经过一个图像时，图像出现一个细线的边框呢？这里对这个问题给出一个回答。

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

首先请注意：学习本文需要一定的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;”即可。

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

7,244

这篇文章发表于 2007年12月09日 星期日 1:39 pm，并被分类于你问我答。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论。 您可以对这篇文章发表一条评论，或者在您自己的网站中引用 (Trackback) 它。



欢迎您发表留言

(须填写)
(须填写,不公开)
请注意：这里输入的HTML代码会被屏蔽，如果需要讨论复杂的具体代码问题，请到我们的论坛发贴，谢谢！

14条留言