ホバーが終了した後も CSS ホバー効果を持続させるにはどうすればよいですか?

ホバー終了後も CSS ホバー状態を維持する

CSS で要素の上にホバーしたとき、ホバーを止めた後も変更を表示したままにしておくことが必要な場合があります。この問題は、CSS ホバー機能を使用してホバー時に画像を表示する場合に発生する可能性があります。

CSS 解決策:

効果的な解決策の 1 つは、transition-delay プロパティを利用することです。このプロパティは、ある状態から別の状態への遷移に遅延を追加し、ホバリング後も画像を表示したままにすることができます。以下に例を示します。

div img {
    position: absolute;
    opacity: 0;
    transition: 0s 180s;
}

div:hover img {
    opacity: 1;
    transition: 0s;
}

このコードでは、不透明度 0 から不透明度 1 への移行が 180 秒遅れて、ホバリング終了後もかなりの期間画像が表示されたままになります。

その他の考慮事項:

• は調整できますホバリング後の画像の表示期間を制御するトランジション遅延値。
• 半透明効果を作成するために、不透明度を 1 ではなく 0.99 に設定するなど、別のテクニックを使用することもできます。
• より複雑な機能が必要な場合は、JavaScript または jQuery を使用してホバー状態の変化を処理することを検討してください。

以上がホバーが終了した後も CSS ホバー効果を持続させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。