CSS :hover Selector

CSS :hover selector is used to select HTML elements when we move the mouse over them. It is useful when we want to give some motion effects on a website. It makes our website more interactive as compared to a normal website.

CSS :hover can be used on any HTML element, it is mostly used in 2D transform effect, to create a dropdown, mega menu and on image overlay, etc.


How to Use CSS :hover Selector

CSS :hover can be used in two ways:

  1. we can use :hover directly on the selected element.
  2. we can use :hover to give effect on child element when we mouse hover on the parent element. For example:  in a dropdown.


Syntax:

element :hover
{
  Property-name: value;
}


To give effect on child element when we mouse over on parent.


Syntax:

parent-element: hover child-element
{
Property-name:value;
}


Example1: 
:hover effect on selected element


<!DOCTYPE html>
<html>
<head>
 
<style>
 
a:hover
{
  color:red;
}
 
</style>
 
</head>
 
<body>
 
<a href="#">web development institute</a>
<a href="#">Next-G Education</a>
 
</body>
</html>
 


Example2: 
:hover effect on child element when we mouse hover on parent element.


<!DOCTYPE html>
<html>
<head>
 
<style>
 
.parent
{
  width:300px;
  height:300px;
  background:#ddd;
  padding:50px;
}
 
.child
{
  width:200px;
  height:200px;
  background:#f00;
}
 
.parent:hover .child
{
background:#000;
}
 
</style>
 
</head>
 
<body>
 
<div class="parent">
<div class="child"></div>
</div>
 
</body>
</html>

In the above example, when you will mouse hover on parent div it will change the color of child div.

Categories: web designing css

Trending Courses

CodeIgniter

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Advance Digital Marketing

Regular : 6 Months

Fastrack : 3 Months

Crash : 2 Months

React JS

Regular : 45 Days

Fastrack : 20 Days

Crash : 7 Days

Laravel

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Front End Developer

Regular : 7 Month

Fastrack : 4 Month

Crash : 2 Month

Related Blogs

Request For Demo