文字

マウスを載せた要素を透明にする方法
公開:2019.08.09 更新:2019.09.10

こんにちは、らいどらです。

今回はWEBデザインではかなり初期にやる、マウスカーソルが載った要素を透明にする処理。簡潔に説明していこうと思います。

疑似要素hover

まず、CSSのセレクタにおける「疑似要素」について解説していきます。理解している方は飛ばしてしまって構いません。

CSSのセレクタは通常、

a {
  color: blue;
}

という感じに記述します。

が、CSSセレクタには「要素名:○○○」といった少し変わった指定方法があります。

これが疑似要素です。

疑似要素と通常のセレクタの違いとしては、通常なセレクタは○○の場所の○○要素!というように指定の仕方が直接的なのに対して、疑似要素を扱う場合は(例えばa要素の疑似要素とすると)、a要素の「前後」や、a要素の状態が○○な時….のように「○○の場所にある○○要素が○○の時!」や「○○の場所の○○の後ろ!」などのように、指定が更に細かくなった感じになっています。

お察しの通り、今回は「○○要素にマウスポインタ―が載っている時」という疑似要素を使ってセレクタを作ってあげればOKということになります。

それでは次章で実際のコードを解説していきます。

マウスが載っている要素を透明にする

それでは実際にコードを書いていきます。前述にあった「○○要素にマウスポインタ―が載っている時」を表す疑似要素こそ「hover」です。

具体的に多くのサイトのようにa(リンク)要素に適用するには以下のように記述します。

a:hover {
  opacity: 0.7;
}

これで、a要素にマウスポインタが載っているなら、透明度を0.7にする。という処理が出来上がりました。※opacity = 要素の透明度を指定するプロパティ。

説明こそ長ったらしかったかもしれませんが、実際にやるのはこれだけです!分かりやすいですね。(笑)

まとめ

いかがでしたでしょうか?

疑似要素は調べると結構な数があります。手近なところで言うとclearfix:afterなどでしょうか。他にもスタイリングが複雑になってくると、様々な疑似要素を使っているのも見ますね。

ではでは、また次回!

おすすめ商品

一から勉強する際に使った教材

持っていると便利なHTML&CSS辞典

コメント

内容をご確認の上、送信してください。