#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. OtherTips › a:hover2

Pseudo-classes :hover 2

CSS疑似クラス :hover 2

:hover 疑似クラスは、選択した要素上にマウスカーソルがあるときにスタイルを適用します。
テキストリンクに触れた時のシンプルなcssのホバーサンプルをまとめました。
サンプルは全てデフォルトスタイルとして、text-decoration: none;を指定してあります。

リンク関連の擬似クラスは常に最後の指定で上書きされるというルールが有り、意図した結果にならない場合は
:link :visited :hover :active の順にスタイルを指定して下さい。

テキストリンクに触れると文字色・背景色変更

a:hover{
   color: #ff0000;
}
a:hover{
   background-color: #33cccc;
}
a:hover{
   background-color: #009999;
   color: #ccffcc
}
a:hover{
   background-image:url(画像url);
   color:#993333;
}