[CSS Selector] E:hover
Using selector:hover, you can apply styles only while the mouse is hovering over an element. This is commonly called a "pseudo-class" (the :hover pseudo-class). On touchscreen devices, it may trigger briefly when you tap and release, but since this is mouse-specific behavior, it is best to avoid relying on it for mobile.
CSS styles are applied while the mouse is hovering over the target element, and revert to the original styles when the mouse moves away. Unlike JavaScript hover event handling, there is no need to write separate code to restore the original styles.
Be aware that this rule can be overridden by other pseudo-classes, so the order of declarations matters. Writing them in the order ':link', ':visited', ':hover', ':active' (the "LVHA" order) prevents conflicts.
Sample Code
div:hover { color: red;} /* Makes text red while hovering over a div element. */
p:hover { color: blue;} /* Makes text blue while hovering over a p element. */
p:hover span { color: orange;} /* Makes child span text orange while hovering over a p element. */
*:hover { font-size: 20px;} /* Increases text size while hovering over any element. */
Browser Display Result
div:hover { color: red;} /* Makes text red while hovering over a div element. */
p:hover { color: blue;} /* Makes text blue while hovering over a p element. */
p:hover span { color: orange;} /* Makes child span text orange while hovering over a p element. */
*:hover { font-size: 20px;} /* Increases text size while hovering over any element. */
<div>This is a div element.</div> <p>This is a p element.</p> <p>This is a p element. <span>This is a span element inside the p element.</span></p>
Browser Compatibility
Chrome1+ ○
Firefox1+ ○
Safari2+ ○
1 and earlier ×
Edge12+ ○
IE11 ○10 ○9 ○
8 ○7 ○
6 ○
Opera4+ ○
3 and earlier ×
iOS Safari1+ ○
Android Browser4.4+ ○3 and earlier × Chrome AndroidLatest ○ Firefox AndroidLatest ○※ Version data is based on MDN.
If you find any errors or copyright issues, please contact us.
シェアする