CSS の疑似要素にホバー効果を適用できますか?

擬似要素のホバー効果

親要素 (#button) と擬似要素 (#button) のセットアップが完了しました：前に）。純粋な CSS または jQuery を使用してホバー スタイルを疑似要素に適用できるかどうか疑問に思っています。

CSS のみのアプローチ

ホバー効果を適用するには疑似要素自体には、次を使用します構文:

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

例:

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

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

別の要素のホバー効果

擬似要素を作成するには別の要素の上にマウスを置くと応答します。これを使用しますCSS:

#element-to-hover:hover #button:before {
    /* Hover styles for the pseudo element when the other element is hovered */
}

例:

#button {
    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;
}

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

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