CSS :hover Selector

The :hover selector is used to select elements when your mouse pointer over them.

CSS :hover provides facility to change, set or remove the effect of an element by using CSS properties or their values when you hover the mouse cursor on some HTML element.

CSS :hover Syntax

:hover {
   css declarations value;
 }

Important Properties of CSS :hover

• Change element properties on which are hovering the mouse cursor.
• At a single time you can write some hover effect for multiple elements.
• Also change some other element property on hovering cursor on another element.

CSS :hover Explanation

Supposed, If you want to change the color of text when you hover your mouse pointer on text OR you want to change the background color of a div element when you hover the mouse pointer on it; Solve this just you can apply CSS hover condition on the web page

The CSS hover will not change the only text color or background-color property, it will change any of the defining CSS property value of hover condition.

Example of CSS :hover

div :hover {
   background-color: #342;
 }
Example with code →

CSS :hover with multiple elements

If you need same hover effect on multiple elements then you can just define hover effect for all elements in a single line CSS code properties; for example:

a :hover, p :hover, h3 :hover {
     background-color: #321412;
     color: white;
  }
Example with code →

If you want to target other element property on hovering another element then use (~) between it:

.mydiv1 :hover ~ .mydiv2 {
     background-color: green;
  }
Example with code →