This content originally appeared on DEV Community and was authored by Rajat Gupta
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 - yet to be written
part 3: pseudo class :visited - yet to be written
part 4: pseudo class: active - yet to be written
part 5: Let me figure this out.
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.
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 😀!
This content originally appeared on DEV Community and was authored by Rajat Gupta
Rajat Gupta | Sciencx (2022-02-08T17:40:26+00:00) pseudo classes- part 1 (:hover). Retrieved from https://www.scien.cx/2022/02/08/pseudo-classes-part-1-hover/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.