マウスが要素から離れた後も CSS ホバー状態を保持するにはどうすればよいですか?

「ホバー解除」後の CSS ホバー状態を保持する

Web デザインでは、ホバー状態はマウスホバー時に追加のコンテンツを表示するためによく使用されます。ただし、デフォルトでは、マウス カーソルが指定された領域から離れると、このコンテンツは消えます。この記事では、カーソルの「ホバー解除」後にホバー状態を表示し続けるための CSS ソリューションを紹介します。

提供された例では、「:hover」疑似クラスを利用して、div 上にホバーしたときに画像を表示します。ただし、ホバーイベントが終了すると画像は消えます。これに対処するには、次の CSS テクニックを使用できます。

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

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

div {
    line-height: 1.2em;
    font-size: 1em;
    color: black;
    transition: 0s 180s;
}

div:hover {
    line-height: 0;
    font-size: 0;
    color: transparent;
    transition: 0;
}

このコードでは、絶対位置、不透明度、トランジションの組み合わせを使用して、目的の効果を実現します。不透明度は最初は 0 に設定されており、画像は非表示になります。ホバーすると、不透明度が 1 に設定され、画像が表示されます。 「ホバー解除」時にコンテンツが消えるのを防ぐために、180 秒 (3 分) の遅延で遷移プロパティが使用されます。この遅延により、不透明度の遷移が効果的に抑制され、画像が無期限に表示されたままになります。

または、フォーカス イベントを使用して、クリック時に画像が表示されたままになるようにすることもできます。

div:hover img:focus {
   opacity: 0;
   transition: 3s;
   -webkit-transform: rotate(-360deg) scale(0.23);
   -webkit-transform: rotate(-360deg) scale(0.23);
   -moz-transform: rotate(-360deg) scale(0.23);
   -o-transform: rotate(-360deg) scale(0.23);
   -ms-transform: rotate(-360deg) scale(0.23);
   transform: rotate(-360deg) scale(0.23);
}

これバリアントは、フォーカス イベントとトランジションを使用して、クリック後に画像をフェードアウトおよび回転させ、トランジション中に表示されたままにします。

これらを実装することで、 CSS テクニックを使用すると、ホバー状態の動作を変更して、マウス カーソルが指定された領域から離れた後でも、目的のコンテンツの可視性を維持できます。

以上がマウスが要素から離れた後も CSS ホバー状態を保持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。