Menu
I have a this setup:
<div id="button">Button</div> and this for 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; } Is there a way to give the pseudo element a hover effect such as #button:before:hover {...} and is it also possible to get the pseudo element to hover in response to another element being hovered like so: #button:hover #button:before {...}? CSS only would be nice, but also jQuery is fine too.
683
#button:hover:before will change the pseudo-element in response to the button being hovered. If you want to do anything nontrivial to the pseudo-element only, however, you'd be better off putting an actual element into your HTML. Pseudo-elements are rather limited.
The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it.
You can change the pseudo-element based on hover of the parent:
JSFiddle DEMO
#button:before { background-color: blue; content: ""; display: block; height: 25px; width: 25px; } #button:hover:before { background-color: red; } #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;} #button:hover:before { background-color: red;}<div id="button">Button</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
