pseudo class ( hover)
1) pseudo class : hover
=> To use the pseudo class hover, we write the selector name and then given : sign and then write hover.
ex- p: hover{
color: Pink:
}
Index.html file:
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>My favourite color is <span class="fav_color"> Blue</span></p>
</body>
</html>
style.css file:
p {
color: red;
}
p:hover {
color: pink;
}
.fav_color {
color: aquamarine;
}
Output when we don't hover:
My favourite color is Blue
Output when we hover over the text:
My favourite color is Blue
** since we have mentioned color of hover as pink, when we hover over the text, it will turn Pink.
Index.html file:
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>My favourite color is <span class="fav_color"> Blue</span></p>
</body>
</html>
style.css file:
p {
color: red;
}
p:hover {
color: pink;
}
.fav_color {
color: aquamarine;
}
p:hover>.fav_color {
color: blue;
}
Output before hovering:
My favourite color is Blue
Output after hovering:
My favourite color is Blue
Comments
Post a Comment