次の 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; }
問題は、どのように適用できるかです。 CSSのみを使用した疑似要素へのホバー効果、またはjQuery?さらに、擬似要素は別の要素のホバー効果に反応できますか?
CSS のみ:
擬似要素を変更するにはCSS を使用した親のホバーに基づいて、次のことができます。以下:
#button:hover:before { background-color: red; }
JQuery:
$("#button").hover(function() { $(this).find(":before").css("background-color", "red"); }, function() { $(this).find(":before").css("background-color", "blue"); });
以上がCSS または jQuery を使用して擬似要素にホバー効果を適用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。