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 をよろしくお願いいたします。