CSS :hover の効果を元に戻すにはどうすればよいですか?

CSS を使用した :hover の効果の反転

開発者は、:hover 疑似クラスを使用して、マウス ポインターが移動したときに要素に特定のスタイルを適用できます。それらの上に浮かんでいます。ただし、マウスが要素から離れるときなど、対照的な効果を定義する必要があることがよくあります。

マウスを離れるときにトリガーされる :hover に代わる CSS はありますか?

マウスの Enter でアクティブ化される :hover とは反対の効果を実現するには、hover の定義を覚えておくことが重要です。マウスが要素の上を通過すると要素が選択されます。したがって、この動作を逆転するには、マウスが要素上にない任意の点を代わりにターゲットにすることができます。

逆効果の実装

メニュー項目の色がホバー時に #999 か​​ら黒に遷移するユースケースを考えてみましょう。マウスを離したときに逆効果を作成するには、ホバー状態ではなくリンク自体に遷移を移動します。

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

このソリューションにより、マウスを離したときに黒から #999 への色の遷移が確実に発生します。

さらに、CSS-tricks では、ホバー オンとホバー オフの両方に異なるトランジションを設定する方法を説明する記事を提供しています。状態:

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

以上がCSS :hover の効果を元に戻すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。