如何實(shí)現(xiàn)hover懸停鏈接文字產(chǎn)生陰影？_Div+CSS教程
      
編輯Tag賺U幣
      


      教程Tag：暫無Tag,歡迎添加,賺取U幣!
      


      
　　
      　　在前面，我們說過了鏈接文字的下劃線的一些情況，現(xiàn)在我們考慮如何實(shí)現(xiàn)鏈接文字產(chǎn)生陰影？當(dāng)鼠標(biāo)移到鏈接文字上時，鏈接文字可以改變顏色，并產(chǎn)生一定的陰影而營造出立體效果，一定比較引人注目。

      　　鏈接文字陰影效果CSS代碼：

      

      

       示例代碼 [www.wf0088.com]
      

      ul,li{ margin:0px; padding:0px; list-style-type: none;}
      #nav{font-family: Verdana, "宋體", Arial;}
      #nav li{ float:left; margin-left:30px;}
      #nav span{display:none;}
      #nav a{font-size:12px; font-weight:800; color:#c00; text-decoration:none; display:block;}
      #nav a:hover{ color:#999;top:1px; left:1px; position:relative;}
      #nav a:hover span{ display:block; top:-1px; left:-2px; position:absolute; color:#000; cursor:pointer;}
      

      

      　　鏈接文字陰影效果XHTML代碼：

      

      

       示例代碼 [www.wf0088.com]
      

      <div id="nav">
      <ul>
      <li><a href="http://www.wf0088.com/">MB5U HomePage<span>MB5U HomePage</span></a></li>
      <li><a href="http://www.wf0088.com/">Div CSS教程<span>Div CSS教程</span></a></li>
      <li><a href="http://www.wf0088.com/">CSS布局實(shí)例<span>CSS布局實(shí)例</span></a></li>
      <li><a href="http://www.wf0088.com/">CSS2.0教程<span>CSS2.0教程</span></a></li>
      <li><a href="http://www.wf0088.com/">CSS在線手冊<span>CSS在線手冊</span></a></li>
      <li><a href="http://www.wf0088.com/">Web標(biāo)準(zhǔn)<span>Web標(biāo)準(zhǔn)</span></a></li>
      <li><a href="http://www.wf0088.com/">XHTML教程<span>XHTML教程</span></a></li>
      </ul>
      </div>
      

      

      　　鏈接文字陰影效果實(shí)例：

      

      

      div css xhtml xml 代碼調(diào)試框 代碼調(diào)試框 [www.wf0088.com]
      


        [ 可先修改部分代碼 再運(yùn)行查看效果 ]
      

      

      　　


      

      



      


      來源：無憂整理//所屬分類：Div+CSS教程/更新時間：2007-01-21


      

      



      


      



      相關(guān)Div+CSS教程：