CSS の疑似要素にホバー効果を追加するにはどうすればよいですか?

擬似要素のホバー効果

問題: 擬似要素にホバー効果を追加する

HTML および CSS で擬似要素を使用する場合、多くの場合、次のことが望ましいです。ホバー効果を追加してユーザーの対話性を強化します。ただし、擬似要素にホバー エフェクトを直接作成するのは難しい場合があります。

解決策: 親要素を使用したホバー エフェクト

代わりに親要素をターゲットにすることで、擬似要素のホバー エフェクトを実現できます。その方法は次のとおりです。

#button:before {
    /* Pseudo element styles */
}

#button:hover:before {
    /* Hover effect styles for pseudo element */
}

このコードでは、#button:before は疑似要素の初期スタイルを定義し、#button:hover:before はホバー効果のスタイルを指定します。親要素 (#button) にマウスを置くと、擬似要素にホバー効果が適用されます。

コード例

次の HTML 設定を考えてみましょう:

<div>

対応する CSS:

#button {
    color: #fff;
    display: block;
    height: 25px;
    margin: 0 10px;
    padding: 10px;
    text-indent: 20px;
    width: 12%;
}

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

#button:hover:before {
    background-color: red;
}

このコードは、テキストの前に青い四角が付いたボタンを表示します。ボタンの上にマウスを置くと、四角形が赤くなります。

以上がCSS の疑似要素にホバー効果を追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。