【CSS】ホバー(マウスオーバー)実装サンプル集(画像の明度を上げる編)

【CSS】ホバー(マウスオーバー)実装サンプル集(画像の明度を上げる編)
きのこさん
ホバーってなんですか?
きのこさん
ま、マウスオーバーですねー

opacity、一択だと思っていた

画像をホバー(マウスオーバー)すると光るやつ。ほんとは半透明にしてるだけだから透過して背景次第でなんだかなということがよくあった。

filter、を使っていいと思う

IE(Internet Explorer)でfilterはNG(対応していない)。
正確には、Windows 10の標準ブラウザーであるEdgeならOK。
今後、みんなWindows 10になるのであればみんなEdgeになるわけで。
という考えであれば問題ないわけで。

▽参考
マイクロソフト、企業にInternet Explorerの使用をやめるよう要請。「IEは技術的負債もたらす」

サンプル

filterプロパティのbrightness() 関数を使う。

See the Pen
CSSだけでホバー(マウスオーバー)、画像の明度を上げる
by 125naroom (@125naroom)
on CodePen.

今後はfilterのほうがいいですね

ホバーの時は、filterのほうがいいですね(個人的見解)。
IE(Internet Explorer)を除外するならおすすめです。

▽参考(filterの現状です)
Can I use

さいごに

きのこさん
ホバー!
きのこさん
ホバー!
Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

3

/

19

2024

Googleさんの
おすすめ

3

/

19

2024

デザインの記事

HAKUTAI WEDDING
増量計画
【jQuery】スクロールして、指定した場所から出てきて、指定した場所で消える