zoukankan      html  css  js  c++  java
  • 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">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 {
        130px;  
        /*li元素的宽度,也就是相当于定义了一个宽度范围,当鼠标移动到上面的范围的时候就触发a:hover效果*/

       display:block;
    }

    详细的见原文参考。

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

  • 相关阅读:
    oracle多个单引号的处理
    oracle 存储过程 动态sql语句
    Python内置方法的时间复杂度
    链表和数组的区别
    python enumerate用法总结
    Python 特殊语法:filter、map、reduce、lambda
    Pandas中DateFrame修改列名
    机器学习通用框架
    Python文件处理之文件写入方式与写缓存(三)
    转载: scikit-learn学习之回归分析
  • 原文地址:https://www.cnblogs.com/huashanqingzhu/p/3768551.html
Copyright © 2011-2022 走看看