マウスが要素から離れた後も CSS ホバー状態をアクティブに保つにはどうすればよいですか?

「ホバー解除」後の CSS ホバー状態の維持

Web デザインでは、ホバー状態はホバー時に追加のコンテンツやエフェクトを表示するためによく使用されます。要素上。ただし、この状態は通常、マウス ポインタが要素から離れると消えます。この記事では、「ホバー解除」後でもホバー状態を維持するための CSS ソリューションについて説明します。

問題

多くの初心者は、ホバー状態を維持するという課題に遭遇します。たとえば、次のコード例を考えてみましょう。

#about:hover #onabout {
  display: block;
}

#about 要素の上にマウスを置くと、#onabout 要素が表示されます。ただし、ホバー状態が終了するとすぐに消えます。

CSS ソリューション

幸いなことに、CSS は遷移遅延を使用したソリューションを提供します。このプロパティは、CSS トランジションを適用する前に待機する時間を指定します。ゼロ以外の値に設定すると、ホバーを解除した後、しばらくホバー状態を保持できます。

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

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

このコードにより、ホバーを解除した後、画像 (img) が 180 秒間表示されたままになります。

代替アプローチ

もう 1 つの CSS テクニックには、transform の使用が含まれます。

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

この方法では、 に tabindex を追加する必要があります。

これらの CSS テクニックを採用すると、ホバーを解除した後でもホバー状態を維持でき、Web ページでのユーザー エクスペリエンスが向上します。

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