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

ホバー後の CSS ホバー状態の維持

Web デザインでは、ホバー状態により、ユーザーがホバーしたときにページ上の要素が変形できるようになります。彼ら。ただし、場合によっては、ユーザーのマウスが要素から離れた後でもホバー状態が持続することが望ましい場合があります。

次のコード スニペットを考えてみましょう。

#about {
  height: 25px;
  width: 84px;
  background-image: url('about.png');
  position: absolute;
  top: 200px;
  left: 0px;
}

#onabout {
  height: 200px;
  width: 940px;
  position: absolute;
  top: 60px;
  left: 0px;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 300;
  display: none;
}

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

このコードは :hover を使用します。マウスが別の要素 (#about) 上にあるときに要素 (#onabout) を表示する疑似クラス。ただし、ユーザーがマウスを #about から遠ざけると、#onabout は消えます。

ホバー状態を維持するために、CSS にはいくつかのオプションが用意されています。 1 つのアプローチは、transition プロパティを導入することです。

#about {
  ...
  transition: 0.2s ease;
}

#about:hover #onabout {
  transition: 0.2s ease;
  opacity: 1;
}

このコードは、#about の上にマウスを移動したり、#about から離れるときにスムーズなトランジション効果を追加します。 opacity プロパティも変更され、マウスが #about を離れた後も #onabout が表示されたままになるようにします。

別のアプローチには、:active 疑似クラスの使用が含まれます。

#about {
  ...
  cursor: pointer;
}

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

#about:active #onabout {
  opacity: 1;
  transition: 0.2s ease;
}

このコードでは、カーソルは、#about がクリック可能であることを示し、要素がクリックされたときにホバー状態を維持するために :active を使用します。この移行により、シームレスな視覚体験が保証されます。

最後に、より高度なソリューションを求める人のために、CSS3 はアニメーション再生状態プロパティを提供します。

#onabout {
  display: block;
  animation-name: hover;
  animation-play-state: paused;
}

#about:hover #onabout {
  animation-play-state: running;
}

このコードは、 @keyframes ホバー宣言を行い、デフォルトで一時停止します。ユーザーが #about 上にマウスを移動すると、animation-play-state が実行中に設定され、アニメーションが開始され、マウスが要素から離れた後もホバー状態が維持されます。

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