首頁 > web前端 > css教學 > CSS:hover選擇器用法的簡單介紹

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

不言
發布: 2018-08-28 11:15:11
原創
2661 人瀏覽過

這篇文章帶給大家的內容是關於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>
登入後複製

 相關建議:

CSS:hover選擇器_html/css_WEB-ITnose

CSS3 選擇器屬性選擇器

以上是CSS:hover選擇器用法的簡單介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板