Below you can see all the examples of the link hover effects grouped together. At the end of the page there are some more advanced styles that take advantage of CSS3.

Link styles

Using color and underline

Using backgrounds

Using border instead of text-decoration

Advanced link styles using CSS2.1 and CSS3

Some of these effects require Safari or WebKit browser, some require Firefox or Opera. I’ll mention the support next to each link.

Shows an arrow in right corner if the link is external, all other than IE6
Adds shadow, Safari 3+ or Opera 9.6+, degrades gracefully in other browsers
Adds background, animated, WebKit or Safari 3+, degrades gracefully in other browsers
Changes background, animated, WebKit or Safari 3+, degrades gracefully in other browsers
Changes color, shows custom tooltip with the URL, reliably only WebKit, Safari 3+, and IE8 (surprise). Doesn’t degrade gracefully but could with some hacks

代码整理：时代Java（NowJava.com）　

转载请注明出处，此代码仅供学习交流，请勿用于商业用途。

X关闭

CSS3控制超级链接的颜色样式或者背景效果