CSS フィルターを使用してマウスオーバー効果を記述する例

CSS フィルターを使用してマウスオーバー効果を記述する例

CSSフィルターを使用してマウスオーバー効果を記述する

<div class="filter-div">
  <img class="filter-img" src="../assets/images/01list.png"/>
</div>
<スタイル>
    .filter-div {
      幅: 67px;
      高さ: 50px;
      背景: #fff;
      &:ホバー{
          背景: #5d7aae;
        }
    }
    .フィルター画像 {
      幅: 67px;
      高さ: 50px;
      &:ホバー{
         フィルター: 明るさ(100);
      }
    }
</スタイル>

マウスを置く前にホバーしない

マウスを置くとホバー

ここでは、CSS フィルター:brightness(100) を使用して、画像に線形乗算を適用し、画像を明るくしたり暗くしたりします。値が 0% または 0 の場合、画像は完全に黒になります。値が 100% の場合、画像は変更されません。その他の値は線形乗数効果に対応します。 100%を超える値も可能で、画像は以前よりも明るくなります。値が設定されていない場合、デフォルトは 1 です。画像を白く染める場合、値は 100 です。

従来のホバー方式では、img の src が変更されるため、画像を再読み込みする必要があるため、初めてホバーしたときに画像が白く点滅します。この方法の利点は、画像を一度だけ読み込むだけでよいことです。もちろん、この方法にも制限があります。ご指摘がありましたら、どうぞご指摘ください。

CSS フィルターを使用してマウス ロールオーバー効果の例を記述するこの記事はこれで終わりです。CSS フィルター マウス ロールオーバーに関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  虫眼鏡の詳細のJavaScript実装

>>:  VMware Workstation Pro 16 ライセンス キーと使用方法のチュートリアル

推薦する

OpenLayers 3 のベクターマップソースの読み込みの問題を解決する

1. ベクターマップベクター グラフィックスは直線と曲線を使用してグラフィックスを表します。これらの...

mysql8.0.21 のダウンロードとインストールに関する詳細なチュートリアル

公式ウェブサイトアドレス: https://www.mysql.com/インストールの提案: インス...

mysql 8.0.20 winx64.zip 圧縮版のインストールと設定方法のグラフィックチュートリアル

mysql 8.0.20 winx64.zip圧縮版のインストールチュートリアルは以下のように記録さ...

MySQLのファジークエリのような遅い速度を解決する方法

質問: インデックスは作成されているのに、Like ファジー クエリがまだ遅いのはなぜですか?インデ...

Vueのref属性の詳細な説明

要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS....

Alibaba Cloud Centos6.X でメールを送信する際に発生するさまざまな問題

序文: Webサービスを提供するために、Alibabaクラウドホストを新しくインストールしました。す...

Ubuntu 16.04 に Docker と nvidia-docker をインストールするための詳細なチュートリアル

目次DockerのインストールNvidia-docker のインストールDockerのインストール1...

Ubuntu で nvidia グラフィック ドライバーをインストールする (簡単なインストール方法)

Ubuntu で nvidia グラフィック カード ドライバーをインストールします。同じ方法で ...

新しいユーザーを作成し、MySQLに権限を付与する最も簡単な方法

ユーザーを作成します: 'oukele' によって識別されるユーザー 'ou...

MySQL の Docker インストールと設定手順

目次序文環境インストールMySQLコンテナを作成して起動する思い出させるMySQLコンテナコマンドを...

nginx でネストされた if メソッドを実装する方法

Nginx はネストされた if ステートメントをサポートしておらず、if ステートメントでの論理判...

jsネイティブウォーターフォールフロープラグイン制作

この記事では、jsネイティブウォーターフォールフロープラグインの具体的なコードを参考までに共有します...

CentOS8でyumソースを変更した後にウェアハウスキャッシュの同期に失敗する問題の詳細な説明

問題の原因: 最初は CentOS 8 のデフォルトの yum ソースを正常に使用できますが、次のコ...

UIエンジニアのキャリアについての私たちの考え

私は長い間落ち込んでいます、なぜでしょうか?以前、お客様から、提供されたソフトウェアが正常に動作しな...

黒、白、グレーの控えめでエレガントなウェブデザインを鑑賞

クラシックな色の組み合わせの中でも、黒、白、グレーの時代を超えた魅力を否定できる人はおそらくいないで...