<style type="text/css"> A { text-decoration: NONE; color:#51bfe0} A:hover {font-weight: bold;color:#990099} <style> 鼠标放在链接字体上的时候,链接字体变粗,颜色改变,如本博客上的样子。其中color:#990099表示链接字体改变的颜色,可以根据个人爱好修改,其他的不需要改。 <style type="text/css"> a{text-decoration:none; color:#51bfe0} A:hover{font-size:23; background:#ffd306; color:#990099} </style> 鼠标鼠标放在链接字体上的时候,链接字体大小改变,颜色改变,有背景颜色。font-size:23表示字体大小;background:#ffd306表示背景颜色color:#990099表示字体颜色,可以根据个人爱好修改,其他的不需要改。 <style type="text/css"> a:link{text-decoration:none} a:hover{text-decoration:none} a:visited{text-decoration:none} </style> 去掉链接字体的下划线。 <STYLE TYPE="text/css"> A { text-decoration: NONE; color: #51bfe0} A:hover {border-bottom:1px dashed #51bfe0 } <style type="text/css"> 鼠标放在链接字体上的时候,链接字体加虚线。 <style type="text/css"> A { text-decoration: NONE; color: #51bfe0} A:hover { position: relative; left:10px; top:10px; } </STYLE> 鼠标放在链接字体上的时候,链接字体会移动,其left:10px表示字体向上移动的距离,top:10px表示字体向上移动的距离,可以根据个人爱好修改具体数值,其他的不需要改。 <style type="text/css"> a { text-decoration: none; padding-bottom: 4px; white-space: nowrap; } a:hover { background: url(背景图片地址) repeat-x 100% 100%; } </style> 鼠标放上在链接字体上的时候,链接字体出现图片背景。 <style type="text/css"> a{ text-decoration: none; white-space: nowrap; padding-bottom: 10px; } a:hover { background: url('http://blog.sina.com.cn/pic/4723cdbf020002nm') repeat-x 100% 100%; } </style> 鼠标放在链接字体上的时候,出现花朵下划线的效果。 <style type="text/css"> a { text-decoration: none; white-space: nowrap; padding-bottom: 5px; } a:hover { background: url('http://blog.sina.com.cn/pic/4723cdbf020002nn') repeat-x 100% 100%; } </style> |