CSS实例：鼠标滑过超级链接文字时改变背景颜色

先讲简单的：

通过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">hao123a>li>
        <li><a href="javascript:;">导航菜单4a>li>
        <li><a href="javascript:;">导航菜单5a>li>
        <li><a href="javascript:;">导航菜单6a>li>
ul>

效果就不截图了，自己运行一下吧

 

下面讲一个稍微复杂一点点的：鼠标滑过超链接文字时修改其背景颜色：

<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">hao123a>li>
        <li><a href="javascript:;">导航菜单4a>li>
        <li><a href="javascript:;">导航菜单5a>li>
        <li><a href="javascript:;">导航菜单6a>li>
ul>

 

background:#f29901;    这个是设置背景颜色。
border-radius:7px;     这个是设置背景颜色块以圆角矩形显示。

 还可以设置超链接背景色块的宽度

a {
    width:130px;  
    /*li元素的宽度，也就是相当于定义了一个宽度范围，当鼠标移动到上面的范围的时候就触发a:hover效果*/

   display:block;
}

详细的见原文参考。

 

参考：http://www.warting.com/web/201010/10594.html

 

 

 

 

转载于:https://www.cnblogs.com/huashanqingzhu/p/3768551.html