【CSS】マウスカーソルをあてた時に色を薄く&透過する方法(#マウスオーバー#hover)

【CSS】マウスカーソルをあてた時に色を薄く&透過する方法(#マウスオーバー#hover) Webデザイン&CSS

このページではWebサイトやブログのページ内の画像に影をつける & 色を変えるCSSの設定方法を解説します。

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

透過する方法

マウスオーバーの前に仕組みを説明すると、ボタンの色を薄くする方法は「透過させる」ことで実現します。透過させるのにはCSSの「opacity」というプロパティを使用し、数字で透過度を指定します。

<!-- サンプルhtml -->
<a class="sample_button" href="hogehoge">SAMPLE</a>
/* CSSの記述 */
.sample_button {
  opacity: 0.5;
}

上記の場合は指定のクラスを半分透過させる指定です。より薄くしたい場合は0に近づけて、濃くしたい場合は1に近づけます

透過度ごとのサンプルはこのような感じになります。

1.0を指定した場合 0.75を指定した場合 0.5を指定した場合 0.25を指定した場合
ぼんやま
ぼんやま

ボタン以外に文字や画像などにも好きな透過度を指定することができるよ!

マウスオーバー時に透過する方法

この透過をマウスオーバーする時に動くようにするには、疑似クラス「hover」を使用します。

【CSS】マウスカーソルをあてた時に色を薄く&透過する方法|まとめ
/* CSSの記述 */
.sample_button:hover {
  opacity:0.5;
}

「sample_button」クラスにマウスオーバーした際に、半分透過させるという指定になります。

以下がサンプルになります。

hoverで0.5を指定した場合

すぐに透過させず、ゆっくり透過させたい場合は「transition」プロパティを使います。

/* CSSの記述 */
.sample_button:hover {
  opacity:0.5;
  transition: 3s;
}

この指定もボタン以外の要素に使うことができます、今回のマウスカーソルをあてた時に色を薄くしたり透過するCSSの設定方法は以上です。

ぼんやま
ぼんやま

役に立つなぁと思ってもらえたら、ブックマークやSNSでシェアなどしてもらえるとうれしいです。他にもよく使うCSSをまとめているので参考にしてください。

タイトルとURLをコピーしました