CSS例項：滑鼠滑過超級連結文字時改變背景顏色

華山青竹發表於2014-06-04
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 {
    width:130px;  
    /*li元素的寬度，也就是相當於定義了一個寬度範圍，當滑鼠移動到上面的範圍的時候就觸發a:hover效果*/

   display:block;
}

詳細的見原文參考。

 

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

 

 

 

 


相關文章