The user action pseudo-classes :hover and :focus allows to visualize if the user hovers oder focuses an element.
# Hover
The :hover selector matches if the user with a pointing device hovers over an element.
# Syntax
Copy
E:hover {
/* declarations */
}
# Example
Copy
a:hover {
outline: 1px dashed gray;
}
The link will get a gray dashed outline border if the user hovers the link.
Try example in CodePen# Browser support
Platform
Chrome
Firefox
Safari
Edge
Internet Explorer
Opera
Desktop
Yes (1.0)
Yes (1.0)
Yes (2.0)
Yes (12.0)
Yes (4.0)
Yes (4.0)
Mobile
Yes (1.0)
Yes (1.0)
Yes (2.0)
Yes (12.0)
No
Yes (4.0)
# Focus
The :focus selector will match any element which has currently keyboard or input focus.
# Syntax
Copy
E:focus {
/* declarations */
}
# Example
Copy
a:focus {
color: red;
}
The link will change his color to red if the link is focused.
Try example in CodePen# Browser support
Platform
Chrome
Firefox
Safari
Edge
Internet Explorer
Opera
Desktop
Yes (1.0)
Yes (1.0)
Yes (2.0)
Yes (12.0)
Yes (4.0)
Yes (4.0)
Mobile
Yes (1.0)
Yes (4.0)
Yes (2.0)
Yes (12.0)
No
Yes (2.0)
Please wait a moment, the comments start loading now...