CSS实例：鼠标滑过超级链接文字时改变背景颜色
浏览数：20 /
时间：2015年06月09日
先讲简单的：
通过CSS可以设置超链接在不同时刻的颜色：
<style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FFFF} /* 已访问的链接 */ a:hover {color: #0000FF} /* 鼠标移动到链接上 */ a:active {color: #00FF00} /* 选定的链接 */ </style>
<ul id="content"> <li><a href="http://www.baidu.com">百度</a></li> <li><a href="http://www.renren.com">人人网</a></li> <li><a href="http://www.hao123.com">hao123</a></li> <li><a href="javascript:;">导航菜单4</a></li> <li><a href="javascript:;">导航菜单5</a></li> <li><a href="javascript:;">导航菜单6</a></li> </ul>
效果就不截图了，自己运行一下吧
下面讲一个稍微复杂一点点的：鼠标滑过超链接文字时修改其背景颜色：
<style> a:link {color: #FF0000;} /* 未访问的链接 */ a:visited {color: #00FFFF;} /* 已访问的链接 */ a:hover {color: #0000FF;background:#f29901;border-radius:7px;} /* 鼠标移动到链接上 */ a:active {color: #00FF00;} /* 选定的链接 */ </style>
<ul id="content"> <li><a href="http://www.baidu.com">百度</a></li> <li><a href="http://www.renren.com">人人网</a></li> <li><a href="http://www.hao123.com">hao123</a></li> <li><a href="javascript:;">导航菜单4</a></li> <li><a href="javascript:;">导航菜单5</a></li> <li><a href="javascript:;">导航菜单6</a></li> </ul>
background:#f29901; 这个是设置背景颜色。
border-radius:7px; 这个是设置背景颜色块以圆角矩形显示。
还可以设置超链接背景色块的宽度
a {
width:130px;
/*li元素的宽度，也就是相当于定义了一个宽度范围，当鼠标移动到上面的范围的时候就触发a:hover效果*/
display:block;
}
详细的见原文参考。
参考：http://www.warting.com/web/201010/10594.html
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
