August 17th 2016

Before proceeding to CSS hover selector, I’ll advice you to read CSS tutorial for beginners, CSS Properties and Values and CSS Selectors first. If you have already read, then we’re good to proceed.

Introduction to CSS hover

:hover is the state of element when the mouse is brought over the element. Simply, when we move our mouse to an element, It goes to the Hover state. So CSS hover helps in styling the element when the element is in hover state.

For Example :

#para-one, #para-two{
   height:200px;
   width:200px;
   background:red;
   color:#fff;
}

#para-one:hover{
   background:black;
}

#para-two:hover{
   background:green;
}

and

Hi there!

I'm here!

we can see the result :

See the Pen Understanding :hover by The SuperKat (@thesuperkat) on CodePen.

Not Satisfied Yet?

Thats the spirit!. I’ve got another complex example for you.

So let’s take our index.html

and our style.css

#main-box{
  height:200px;
  width:200px;
  background:yellow;
}
 
#main-box-1{
  height:160px;
  width:160px;
  background:red;
  margin:auto;
}
 
#main-box-2{
  height:120px;
  width:120px;
  background:black;
  margin:auto;
}
 
#main-box-3{
  height:80px;
  width:80px;
  background:white;
  margin:auto;
  text-align:center;
  line-height:80px;
}
 
#main-box:hover{
  background:red;
}
 
#main-box:hover > #main-box-1{
  background:yellow;
}
 
#main-box:hover * #main-box-2{
  background:white;
}
 
#main-box:hover * #main-box-3{
  background:black;color:white;
}

The above example is not that complex as it seems. I’ve just taken nested div elements one inside another. And applied a css when the #main-box div is in hover state, then what to do with the other div elements. That’s all, Yeah as simple as it sounds.

So CSS is getting interesting right?, yeah! i know, but you’ve barely scratched the surface. There’s a lot more to learn. :hover can add beautiful interactions to your webpage. Just hold on. We’re getting started only :). you can style any attribute of the HTML while its in hover state.

Next Step : CSS :active

Related Links :

CSS [attribute] selector
CSS :root selector

The post CSS hover appeared first on The Superkat.

This post first appeared on The SuperKat, please read the originial post: here