pseudo classes in CSS- part 1 (:hover)

Note: This is the first part of a 5 part series dedicated to the pseudo classes of CSS.

In this part, we'll understand the the pseudo class :hover but if you want to jump to any other pseudo class, be my guest and click on the links provided below:

part 1: pesudo class :hover

part 2: pseudo class :link

part 3: pseudo class :visited

part 4: pseudo class :active

part 5: pseudo class :target

Let's see what MDN has to say: The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

Talk is cheap, let me show you the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Subscribe to my daily newsletter</h1>
</body>
</html>

Now, let's use the hover pseudo class to the above code and see what happens:

    h1:hover{
        color: red;
    }

See☝️ how the color of the text changes when we hover the cursor over it. Instead of color we can give any CSS property that we want to be applied when the cursor hovers over the element. However, one thing to notice is that although the :hover is working, the cursor is looking dull while hovering. So, let's make it awesome.

        h1{
            cursor: pointer;
        }

The cursor is a CSS property that allows us to change the cursor style.

Here's a quick summary:

Use the :hover selector to style links when you hover over them. It can be used on elements other than links.
Use the :link selector to style links to unvisited pages.
Use the :visited selector to style links to visited pages.
The :active selector is used to style the active links. It can be used on elements other than links.

LVHA: If you are using one or more of these selectors in a single page then use the link selector first then the visited selector then hover and finally active at the end.

That's all folks.

If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.

I write one article every day related to web-development (yes, every single day). Follow me here if you are learning the same.

my twitter handle: @therajatg

If you are the linkedin type, let's connect: https://www.linkedin.com/in/therajatg/

Have an awesome day ahead 😀!

Blog

pseudo classes in CSS- part 1 (:hover)

Rajat Gupta

Join Our Newsletter. No Spam, Only the good stuff.

Related