:hover - Selector CSS
Summary of characteristics of the :hover selector
Description of the :hover pseudo-class.
The :hover pseudo-class targets elements that are hovered by the mouse pointer, and during the time when
this pointer is above them. The mouse button does not need to be pressed for :hover to be activated.
Touchscreens are special.
Careful! With a touchscreen (phones, tablets, or desktop touch screens) the :hover selector is never activated.
Support for :hover can be tested with media queries (refer to the @media directive for further explanation):
@media (hover: hover) {
a:hover {
background:yellow;
}
}
@media (hover: none) {
a:active {
background:yellow;
}
}
Examples of how to use :hover.
Choosing properties to use with :hover.
Pretty much any property can be applied to the :hover selector. However, we prefer those that do not require a recalculation of the layout.
The border property, for example, adds a border that shifts the entire rest of the page, while the
outline adds an outline that overlaps with elements already in place, so you don't need to move them.
This distinction is clearly visible in the example below.
border) -
Outline (property outline) -
background color
Improved visual effect with a transition.
The transition effect consists of gradually varying the value of a property.
For more on this, see the transition property.
The combination of a transition and the :hover selector often results in interesting visual effects.
Using :hover on a pseudo-element.
The :hover pseudo-class can be combined with a selector of the pseudo-element type.
The effect will be as follows: when the pointer hovers over the element, the styles are applied to the pseudo-element.
You can test this on the examples below.
:hover acts here on the pseudo-element ::before.
Here, it is the selected portion of text that is made reactive with :hover.
Browser compatibility with :hover.
The pseudo-class :hover is very well recognized by browsers.
Initially its use was reserved for elements of type a, but it is now applicable to all types of elements, and also to pseudo-elements.
:hover pseudo-class targeting the element the mouse is on.:hover pseudo-class on type a elements.:hover pseudo-class on all elements.:hover pseudo-class on pseudo-elements (such as ::before or ::after for example).Notes:
(1) On Safari, clicking a clickable element changes the element to the :hover state. The element will remain in the :hover state until another element has entered the :hover state.
(2) On Internet Explorer, clicking on an element and scrolling through the content (without moving the cursor) does not disable :hover.
:hoverpseudo-class
:hoveron links a
:hoveron all elements
:hoveron pseudo-elements
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
Opéra Mobile
KaiOS Browser
Samsung Internet
Opéra
Safari
Safari sur IOS
Chrome
Firefox
Edge
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Historic of the :hover pseudo-class.
-
Cascading Style Sheets Level 2 - Revision 1 Specification
Introduction of the:hoverpseudo-class in CSS version 2.xx.
November 04, 1997Working Draft.
March 24, 1998Proposed for recommendation.
May 11, 1998Recommendation . -
Selectors Level 3
No change to the:hoverpseudo-class.August 03, 1999Working Draft.
November 13, 2001Candidate Recommendation.December 15, 2009Proposed for recommendation.September 29, 2011Recommendation . -
Selectors Level 4
No change to the:hoverpseudo-class.September 29, 2011Working Draft.
See also...
The following pseudo-classes allow you to designate an element according to the user's actions: mouse movements, selecting an input box, link, etc.