CSS中关于超链接一些特殊的情况

今天总结下CSS链接相关的知识：第一个，基础，A:hover可以定义鼠标悬停的时候，显示的样式，但是最好同时加上a:focus，这样，再通过键盘到达的时候，会显示一样的样式效果。

让下划线更与众不同：因为下划线会使页面看上去比较乱，所以一般设计者都会用粗体代替下划线。但是有两个思路比较好，或许会让你茅塞顿开哦。

第一个思路是使用虚线，而当激活的时候，将这条线变成实线，从而想用户提供视觉反馈。

第二个思路是使用动态的下划线，有没有试过对a:hover,a:active等使用背景，如果你使用一个非常棒的背景，这会大大的与众不同，比如一个逐渐向前动画，会产生一种非常棒的脉冲效果。这个技术也可以用在a:visited的上面，比如加一个已访问的小图标，可以防止用户“回溯”浪费用户时间。

注意，在IE中，并不支持背景动画效果，好在他会显示动画的第一帧，不会出现没背景的情况。

下面要说的是突出显示不同类型的链接：有个链接是新窗口打开的，有的链接是原窗口打开的，对于用户来讲，这一点会降低体验，因为他们不能预先知道要去哪里，尤其是网站比较乱的时候。另外新窗口无法使用退后按钮。

较好的解决方案是让新窗口链接看起来不太一样。比如给所有的新窗口链接右上角加个向外的小图标。实现的时候，给右侧加一个内边距，让背景小图片显示出来

这个方法很有效，但是实现起来比较难，因为你要检查每一个链接对没一个新窗口链接加上代码。其实可以使用CSS属性选择器，让所有具有 target=”_blank”的链接产生这样的样式，关于CSS属性选择器的内容可以上网查查，朱宝祥就不说了。

最后要说的是CSS背景图像的问题，就是所谓的“图像翻转”技术。

简单来说，其实和前面差不多，只不过是对a的几个伪类设置不不同的背景图像，我在这里不说怎么设置了。主要说下图像延迟的问题：

首先，设置背景图像的问题在于浏览器第一次加载鼠标悬停图像时，有短暂的延迟，这会造成视觉上的闪烁，让人感觉按钮反应有点慢。

方案一，可以将鼠标悬停的图像应用于父元素，从而预先加载。

方案二，使用一个图像，将几种效果放在一张图像上面，分别设置link，visited，active不同的对齐方式。只可惜即使是这样IE也会请求服务器重新加载，有一定的延迟，这会有点轻微的闪烁，这有点烦人，为了避免闪烁，可以将翻转状态应用于链接的父元素，这样在图像加载时，它会消失一段时间，但是会露出相同的图像，消除了闪烁。消除闪烁的另外一种方式使用IE专用的CSS文件包含以下代码，启动背景缓存，实现预加载。