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

web material *Essence

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

Pseudo-classes :hover 4

CSS疑似クラス :hover 4

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

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

テキストリンクに触れた時の動きに変化を付ける

時間的変化を指定できる transition(トランジション)プロパティがCSS3から追加されました。
transitionプロパティを使う事で、hover時の動きに時間的な変化を付ける事ができます。
また、transitionプロパティと一緒に transform(トランスフォーム)という変形に関するプロパティの値に関数を指定することで『移動・回転・伸縮・傾斜』は、2D(XY方向)の設定が、また、『移動・回転・伸縮』は、3D(XYZ方向)による指定ができます。 (transitionプロパティとtransformプロパティの値については、下段の表と詳しいサイトをご参照下さい。)

a {
   transition: all 1.5s;  /* 1.5秒で変化 */
}
a:hover {
   background-color: #ffbfbf;
}

例1-2:マウスオーバー/アウト時間を変更
a {
   transition: all 0.3s;  /* マウスアウト時、0.3秒で変化 */
}
a:hover{
   background-color: #ffbfbf;
   transition: all 1.5s;  /* マウスオーバー時、1.5秒で変化 */
}
a {
   opacity: 1;  /* 不透明 */
   transition: all 1s;  /* 1秒で変化 */
}
a:hover{
   opacity: 0.5;  /* 50%半透明 */
}

例2-2:触れると文字色と透明度を変化
a {
   opacity: 1;  /* 不透明 */
   transition: all 1s;  /* 1秒で変化 */
}
a:hover{
   color: #ff0000;  /* 文字色を変更 */
   opacity: 0.5;  /* 50%半透明 */
}
a {
   display: inline-block;
   transition: 0.5s;  /* 0.5秒で変化 */
   transform: scale(1);  /* 基準の大きさ */
}
a:hover {
   transform: scale(1.1);  /* 1.1倍に拡大 */
}

例3-2:触れると文字色を変更して拡大
a {
   display: inline-block;
   transition: 0.5s;  /* 0.5秒で変化 */
   transform: scale(1);  /* 基準の大きさ */
}
a:hover {
   color: #6699ff;  /* 文字色を変更 */
   transform: scale(1.1);  /* 1.1倍に拡大 */
}
a {
   display: inline-block;
   transition: 0.5s;  /* 0.5秒で変化 */
}
a:hover {
   transform: rotate(5deg);  /* 時計回りに5度傾く */
}

例4-2:触れると文字色を変更して傾く
a {
   display: inline-block;
   transition: 0.5s;  /* 0.5秒で変化 */
}
a:hover {
   color: #339966;  /* 文字色を変更 */
   transform: rotate(-5deg);  /* 反時計回りに5度傾く */
}

transitionプロパティの使い方

transitionプロパティは、トランジション関連のプロパティをまとめて指定するショートハンドです。
{transition: -property -duration -delay -timing-function;}
各プロパティの値は半角スペースで区切って指定します。任意の順序で指定できますが、transition-duration、transition-delayプロパティは順序が決まっており、省略した場合は、各プロパティの初期値が適用されます。

transitionプロパティ
プロパティ名 読み方 説明
transition-property トランジション・プロパティ 変化を適用するプロパティを設定 (値は、all 初期値, none 変化なし, プロパティ名)
transition-duration トランジション・デュレーション 変化の始まりから終わりまでの時間を設定 (単位は s 、1sは1秒)
transition-timing-function トランジション・タイミング・ファンクション 変化の具合を設定 (値は、default, linear(一定のスピード), ease-in, ease-out, ease-in-out, cubic-bezier() 変化を3次ベジェ曲線で指定)
transition-delay トランジション・ディレイ 変化が始まるまでの待ち時間を設定 (単位は s 、1sは1秒)
transition トランジション プロパティを一括指定するショートハンド・プロパティ (property値 duration値 timing-function値 delay値の順に半角空けて記述)

参照:MDN web docs - CSS transition の使用

transformプロパティの使い方

transformプロパティは、トランスフォーム関数を指定して対象要素を変形・移動・回転させます。
{transform: トランスフォーム関数;}
値は半角スペースで区切って複数指定できます。

transformプロパティの値に指定できる関数
関数 読み方 変形 書き方
translate トランスレイト 移動(pxで指定) translate(x,y)、translateX()、translateY()、translate3d(x,y,z)、translateZ()
rotate ローテート 回転(degで指定) rotate(deg)、rotateX(deg)、rotateY(deg)、rotate3d(数値, 数値, 数値, 回転角度)、rotateZ(deg)
scale スケール 伸縮(数値を指定) scale(x,y)、scaleX()、scaleY()、scale3d(x,y,z)、scaleZ()
skew スキュー 傾斜(degで指定) skew(x,y)、skewX(deg)、skewY(deg)

参照:Qiita - 【CSS3】Transform(変形)関連のまとめ