この記事では、CSS:hover selector の使い方を簡単に紹介します。必要な方は参考にしてください。
: リンク上にマウスを移動すると、ホバーによって追加される特別なスタイル。
ヒント: :hover セレクターは、リンクだけでなくすべての要素で使用できます。
ヒント: :link セレクターは未訪問のページへのリンクのスタイルを設定し、:visited セレクターは訪問済みのページへのリンクのスタイルを設定し、:active セレクターはリンクをクリックしたときのスタイルを設定します。
注: 望ましい効果を生み出すには、CSS 定義で :link と :visited の後に :hover を配置する必要があります。 !
<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 selector_html/css_WEB-ITnose
以上がCSS:hover selector の使い方の簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。