ボタンや画像のリンクなどで、マウスカーソルをあてた時に色を薄くする方法を紹介します。

マウスカーソルを画面で動かす時にどこがクリックできる部分なのかがわかりやすく便利です。

SPONSORED LINK

HTML/CSSの記述

例としてaタグの要素をマウスオーバーした時に色が薄くなるよう、以下のように記述します。

HTML

<a class="mouseover" href="hogehoge"></a>
CSS

a.mouseover:hover {
    cursor:pointer;
    filter: alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity:0.6;
}

疑似クラスhoverを使うことで、その要素にマウスカーソルがあたった時の表示を設定できます。

上記のサンプルでは、マウスオーバーした時に本来の60%の薄さで表示するようにしています。

サンプル
マウスオーバーで色が薄くなるサンプル
SPONSORED LINK

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です