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

web material *Essence

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

Pseudo-classes :hover 3

CSS疑似クラス :hover 3

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

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

テキストリンクに触れると文字位置移動

hover時に文字を移動する方法は幾つか有りますが、position:relativeを使った『通常の位置から相対的に移動する』方法と、transformプロパティ(CSS3)のtranslate()を使った『要素の表示位置を移動させる』方法を掲載しています。
(transformプロパティの使用注意点については下段枠を参照)

a:hover{
   position: relative;
   left: 2px;  /* 左から2pxの位置 */
}

例1-2:触れると文字を右に移動CSS3
a{
   display: inline-block;
}   
a:hover{
   transform: translateX(2px);  /* translateX(X方向の距離) */
}
a:hover{
  position: relative;
  right: 2px;  /* 右から2pxの位置 */
}

例2-2:触れると文字を左に移動CSS3
a{
   display: inline-block;
}
a:hover{
   transform: translateX(-2px);  /* translateX(マイナスX方向の距離) */
}
a:hover{
  position: relative;
  bottom: 2px;  /* 下から2pxの位置 */
}

例3-2:触れると文字を上に移動CSS3
a{
   display: inline-block;
}
a:hover{
   transform: translateY(-2px);  /* Y軸は上方向がマイナス */
}
/* 通常のY軸とは逆に、transformで利用するY軸は上方向がマイナス、下方向がプラスになります */
a:hover{
   position: relative;
   top: 2px;  /* 上から2pxの位置 */
}

例4-2:触れると文字を下に移動CSS3
a{
   display: inline-block;
}
a:hover{
   transform: translateY(2px);  /* Y軸は下方向がプラス */
}
/* 通常のY軸とは逆に、transformで利用するY軸は上方向がマイナス、下方向がプラスになります */
a:hover{
   position: relative;
   top: 2px;  /* 上から2pxの位置 */
   left: 2px;  /* 左から2pxの位置 */
}

例5-2:触れると文字を右下に移動CSS3
a{
   display: inline-block;
}
a:hover{
   transform: translate(2px,2px);  /* translate(X方向の距離,Y方向の距離) */
}
/* 通常のY軸とは逆に、transformで利用するY軸は上方向がマイナス、下方向がプラスになります */
a:hover{
   position: relative;
   top: 2px;  /* 上から2pxの位置 */
   right: 2px;  /* 右から2pxの位置 */
}

例6-2:触れると文字を左下に移動CSS3
a{
   display: inline-block;
}
a:hover{
   transform: translate(-2px,2px);  /* translate(X方向の距離,Y方向の距離) */
}
/* 通常のY軸とは逆に、transformで利用するY軸は上方向がマイナス、下方向がプラスになります */
a:hover{
   position: relative;
   bottom: 2px;  /* 下から2pxの位置 */
   left: 2px;  /* 左から2pxの位置 */
}

例7-2:触れると文字を右上に移動CSS3
a{
   display: inline-block;
}
a:hover{
   transform: translate(2px,-2px);  /* translate(X方向の距離,Y方向の距離) */
}
/* 通常のY軸とは逆に、transformで利用するY軸は上方向がマイナス、下方向がプラスになります */
a:hover{
   position: relative;
   bottom: 2px;  /* 下から2pxの位置 */
   right: 2px;  /* 右から2pxの位置 */
}

例8-2:触れると文字を左上に移動CSS3
a{
   display: inline-block;
}
a:hover{
   transform: translate(-2px,-2px);  /* translate(X方向の距離,Y方向の距離) */
}
/* 通常のY軸とは逆に、transformで利用するY軸は上方向がマイナス、下方向がプラスになります */
CSS3 transformの適用される要素は『変形可能な要素』と決められています。
ブロックレベル要素や置換インライン要素、
display: table-row, display: table-row-group, display: table-header-group, display: table-footer-group, display: table-cell, display: table-caption が指定された要素、となっています。
transformプロパティをインライン要素に対して適用する場合は『inline-block』を指定しておく必要があります。
またtransformプロパティはCSS3で追加された仕様なので、古いブラウザでは認識できなかったり、認識するためにはプロパティ名にベンダープレフィックスを付けなければならない場合が有ります。

参照:しらぎくさいと - transform プロパティ(要素の変形)
TAG index - ブロックレベル要素とインライン要素