Pseudo-class, css, hover, css hover

TABLES OF CONTENTS

Introduction/Definition
Hover on Link Tag
Hover on a Div Tag
Hover on a Button Tag

DEFINITION/INTRODUCTION:

CSS :hover Pseudo-class is used to set how an element should behave when a user move their mouse pointer over an element without necessarily clicking or dragging it.

See syntax below.

When applying hover effect to an element, the element should first be styled and then a separate rule should be created for the hover effect.

We do this by first prefixing a colon : directly on the selected element with the word hover and then the effect will want to apply to the element.

NOTE: hover effect will only work when a mouse pointer moves over an element. Have in mind that hover effect has little or no effect on touch screen devices since users can NOT hover on an element. Hover effect should be reserved for desktop experience.

SIMPLE ILLUSTRATIONS TO EXPLAIN CSS HOVER EFFECTS

NOTE: From the above illustration: The code on the left hand illustrate, how element should first be styled before hover effect is applied while the code on the right hand illustrate, how hover effect should be applied on a separate code block.

The two arrows illustrate how code written on both side (left and right hand) are linked to each other.

HOVER ON LINK TAG:

Let’s take a look at how hover effect can be applied on a link tag.

our HTML code example below has a link tag with a text content.

Type the code and run on your browser.

<body>
    <a href="#">Hey! hover here</a>
</body>

Your code should look like this on your browser.

Screenshot (19).png

Before you type the CSS code example on your Editor, move your mouse pointer over the printed text on your screen. You will notice immediately how the mouse pointer changes from the default (arrow) to a pointer (hand). This is because link tags has pointer set on hover by default.

Now type your CSS code and run.

body {margin-left: 2em;}

     a:hover {
      color: darkorange;
     }

Your code should look like this when you hover over it

Screenshot (20).png

our CSS code is very basic, we set the body to a margin-left of 2em. To move the content away from the browser edge. This is done for the sake of readability. Then we apply an hover effect to the <a> tag. Which takes a color of darkorange on hover.

HOVER ON A DIV TAG:

We’ve seen how to apply hover to the <a> tag, now let’s learn how to apply an hover effect on a <div> tag.

Type the code below and run on your browser

<body>
      <div class="box"></div>
</body>

body {margin-left: 2em;}

.box {
       background-color: red;
       width: 200px;
       height: 200px;
       margin-top: 1em;
       transition: all 1s ease-in;
     }

     .box:hover {
       background-color: blue;
       border-radius: 2em;
     }

Your code should be look like this on your browser.

Screenshot (21).png

Move your mouse pointer over the red box display on your browser and watch how the background-color changes from red to blue and the border-radius changes from a pointed edge to a round corner.

Firstly, we create a <div> tag with a class of box and we added a background-color of red, width of 200px, height of 200px. This is meant to give it a define width and height.

We also set the margin-top to 1em to move the box below the top edge of the browser. And transition is set to all and one second delay ease-in.

While on hover we set the box background-color to blue and border-radius to 2em.

HOVER ON A BUTTON TAG

Must buttons on a webpage have hover effect, in this example will we learn how to style a button with hover effect applied to it.

Type the code and run on your browser

<body>
      <button>Click here</button>
</body>

body {margin-left: 2em;}

 button {
       border: 0;
       background-color: lime;
       padding: 1em 2em;
       border-radius: 10px;
     }

     button:hover{
      background-color: black;
      color: lime;
      cursor: pointer;
     }

Move your mouse pointer over the button. You should see the background-color and the color of the text changes and the cursor to pointer (hand).

Screenshot (22).png

Our HTML code example have a button tag with a text content of click me while on our CSS code example, we set the border to 0, this removes the border around it, background-color to lime, padding of 1em to top and bottom and 2em left and right of the button. border-radius is set to 10px.

CONCLUSION:

Alright! We’ve come to the end of this tutorial.

Thanks for taking your time to read this blog post about CSS Hover Pseudo-Class

Feel free to ask questions. I’ll gladly reply back.

You can find me on Twitter and other social media @ocxigin.

Cheers

Css Hover Pseudo-class

A Complete beginners guide.