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

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

opacity、一択だと思っていた

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

filter、を使っていいと思う

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

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

サンプル

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

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

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

さいごに

ホバー!
ホバー!
Author

デザコト

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

Googleさんの
おすすめ

6

/

22

2024

Googleさんの
おすすめ

6

/

22

2024

デザインの記事

EHON HOTEL
  • 2024.06.21New
  • EHON HOTEL
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
自主映画『アット・ザ・ベンチ』第2編「まわらない」
【jQuery】ページ内リンクでスムーズスクロール(固定ヘッダーがあったら)