Menu
Is it possible to only display the :after pseudo using :hover? For example using alternative elements.
#parent{}
#child{display:none;}
#parent:hover >#child{display:block;}
As far as I've got with the same method:
#parent{}
#parent:after{content:'hi';display:none;}
#parent:hover #parent:after{display:block;}
Is it possible at all? Or am I fooling myself?
377
The :before and :after selectors in CSS is used to add content before and after an element. The :hover is pseudo-class and :before & :after are pseudo-elements. In CSS, pseudo-elements are written after pseudo-class. In CSS3 double colon(::) is used to denote pseudo-element.
To display div element using CSS on hover a tag: First, set the div element invisible i.e display:none;. By using the adjacent sibling selector and hover on a tag to display the div element.
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.
Pseudo-classes enable you to target an element when it's in a particular state, as if you had added a class for that state to the DOM. Pseudo-elements act as if you had added a whole new element to the DOM, and enable you to style that.
You can combine the two:
#parent:hover:after {
content:'hi';
}
JSFiddle.
190
Yes. Not sure why you didn't try it yourself but it's possible:
#parent:hover:after{content:'hi';}
http://jsfiddle.net/uz3w4/
42
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
