CSS :hover Selector - Jaya Krishna's Blog

To select elements when the mouse goes over them we use :hover selector.

The :hover selector is used to select elements when you mouse over them. Tip: The :hover selector can be used on all elements, not only on links.


Syntax:

.selector :hover{ 
      propertyName: propertyValue; 
}

Example

Before Hover:
.classSelector{     
    background-color:#ADDDD0;
    width:5rem;
    height: 5rem; 
}




After Hover:
.classSelector:hover{     
    background-color:#ADDDD0;
    border-radius: 50%;
}


See the Pen CSS :hover Selector - Jaya Krishna's Blog by Jaya Krishna Miriyam (@jayakrishna_miriyam) on CodePen.