超链接文字特效代码(详细版) - - 飞喏 - [东方博客2.0]

东方博客 > 飞喏 > 日志列表      >>随便看看

2007-12-18 | 超链接文字特效代码(详细版)     朗读全文

标签：超链接 文字特效 

或许大家看到别人的博客鼠标放在超连接上有"抖动"的效果,今天飞喏整理了一下把所有的特效发给大家.
 
1.让链接变色
<DIV>  </DIV><STYLE TYPE="text/css">
A { text-decoration: NONE; color: #51bfe0}
A:hover { color: #3399FF }
</STYLE>

                                           

2.增加链接的力度—即字体变大

<DIV>  </DIV><STYLE TYPE="text/css">
A { text-decoration: NONE; color: #51bfe0}
A:hover {font-weight: bold }
</STYLE>

                                          

3.触到链接是出现虚线

代码：

<DIV>  </DIV><STYLE TYPE="text/css">
A { text-decoration: NONE; color: #51bfe0}
A:hover {border-bottom:1px dashed #51bfe0 }
</STYLE>

                                           

4.会移动的链接

代码

<DIV>  </DIV><STYLE TYPE="text/css">
A { text-decoration: NONE; color: #51bfe0}
A:hover { position: relative; left:1px; top:1px; }

</STYLE>

                                 

5.给链接添加背景色

<DIV>  </DIV><STYLE TYPE="text/css">
A { text-decoration: NONE; color: #51bfe0}
A:hover { background-color: #CCFFFF; }
</STYLE>