**CSS selectors** play a key role in styling an HTML element. Selectors are used to select the HTML elements that you want to apply styles to on a web page; this can either be a class, ID, or attribute.

#     
## Pseudo-classes
CSS offers several pseudo-classes to style elements that can help differentiate between various element states.
The **pseudo-class** is a keyword combined with a selector to specify a special state of the selected element(s) in CSS. 

For example, the **`:hover`** keyword, when combined with a CSS selector, can be used to style an element when the user's pointer hovers over it.

In this shot, we will mainly focus on 
the CSS Hover selector, which is a [User Action Pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#user_action_pseudo-classes) selector, which styles an HTML element when the user hovers over the element with a cursor. Hover selectors are visible until the user stops hovering over the element with their cursor.

The syntax for the `:hover` selector is as follows:

```css
css-selector:hover {
	// CSS rules
}
```
The CSS selector can either be a class, ID, or HTML attribute.
The `:hover` keyword specifies states for which the styles of the CSS rules will be used.

For example:
```css
.group:hover{
      color:purple;
}
```
When the user hovers over the `group` class, the color is set to change to `purple`.


## Different use cases of the `:hover` selector

There are various ways in which the `hover` selector can be used:

- Change the color of the text
- Modify the shape of an image
- Add transition effects to navbar items
- Change the background of a button

## Code

### Change the color of the text







<html>
 <head>
 </head>
 <body>
   <h1> Educative </h1>
 </body>
</html>

h1{
    color:black;
}
h1:hover{
    // changing the color of the element in the hover state
    color: purple
}

codemirror

In the example above, the color of the `h1` element will change when the pointer hovers over it.

#    
##    
### Modify the shape of an image




.image{
    height:150px;
    width:150px;
    border-radius: 10px;
}
.image:hover{
    // Changes to circle shape
    border-radius: 50%;
}

In the example above, the image changes the shape when the user's pointer hovers over it by changing the value of the `border-radius` in the hover state.

#    
##    
### Add transition effects to navbar items

<html>
 <head>
 </head>
 <body>
   <nav>
     <ul>
       <li> <a href='#'> Home </a> </li>
       <li> <a href='#'> About </a> </li>
       <li> <a href='#'> How To </a> </li>
       <li> <a href='#'> Contact </a> </li>
    <ul>
  </nav>
 </body>
</html>

body{
    background: #960aa3;
}
nav{
    display:flex;
    justify-content: space-evenly;
}
ul{
     display:flex;
     
}
li{
    list-style: none;
    margin: 10px;
}
li a{
    color:white;
    text-decoration: none;
    // setting the transition property
    transition: all 1s ease-in;
}

li a:hover{
    // Adding an effect on hover
    border-bottom: 2px solid black;
}

In the example above, the hover state is set to have a transition effect of adding a `border-bottom` to each navbar item.
#    
##    
### Change the background of a button




<html>
 <head>
 </head>
 <body>
   <div class='container'>
     <button>
       <a href='https://www.educative.io/' targert='_blank'> Educative.io </a>
     </button>
   </div>
 </body>
</html>

body{
    display:flex;
    justify-content: center;
    align-items: center;
}
button{
    border-radius: 10px;
    border:none;
    // setting the color of the background
    background: purple;
    padding:10px;
}
button:hover{
    // Changing the color of the background
    background: black;
}
button a{
    color:white;
    text-decoration: none;
}

In the example above, the background of the button changes when the pointer hovers over it.

#    
## Limitations on different devices
As a [user action pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#user_action_pseudo-classes) selector, there are some limitations on how the styles apply to various devices.

- Mouse: The `:hover` styling will show when the mouse hovers over an element. 

- Mobile devices: The `:hover` state will get triggered on click/touch even though there’s no pointer event.

- Keyboard: The `:hover` styling will not be triggered because there’s no pointer event.







What is the CSS hover selector?

CSS :hover styles elements when a pointer hovers over them, useful for text color changes, image shapes, nav transitions, and button backgrounds.

What is the CSS hover selector?

Pseudo-classes

Different use cases of the :hover selector

Code

Change the color of the text

Modify the shape of an image

Add transition effects to navbar items

Change the background of a button

Limitations on different devices

Different use cases of the `:hover` selector