CSS:hover selector の使い方の簡単な紹介

不言
リリース: 2018-08-28 11:15:11
オリジナル
2635 人が閲覧しました

この記事では、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

CSS3 セレクター属性セレクター

以上がCSS:hover selector の使い方の簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート