CSS:hover選取器用法的簡單介紹

來源:互聯網
上載者:User
本篇文章給大家帶來的內容是關於CSS:hover選取器用法的簡單介紹 ,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所協助。

:hover在滑鼠移到連結上時添加的特殊樣式。

提示: :hover 選取器器可用於所有元素,不僅是連結。

提示: :link 選取器設定了未訪問過的頁面連結樣式, :visited 選取器設定訪問過的頁面連結的樣式 :active選取器設定當你點選連結時的樣式。

注意: 為了產生預期的效果,在 CSS 定義中,:hover 必須位於 :link 和 :visited 之後!!

<style media="screen">  .pagination li {line-height: 25px;list-style-type:none;}.pagination a {display: block;color: #f2f2f2;text-shadow: 1px 0 0 #101011;padding: 0 10px;border-radius: 2px;box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;background: linear-gradient(top,#434345,#2f3032);}.pagination a:hover {text-decoration: none;box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;background: linear-gradient(top,#f48b03,#c87100);}   </style>  <body>    <div class="pagination">      <ul>        <li><a href="#">Prev</a></li>        <li><a href="#">1</a></li>        <li><a href="#">2</a></li>        <li><a href="#">3</a></li>        <li><a href="#">4</a></li>        <li><a href="#">5</a></li>        <li><a href="#">Next</a></li>      </ul>    </div>   </body>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.