1/* Changes an element's color on hover */
2
3.selector {
4 background-color: black;
5}
6
7.selector:hover {
8 background-color: blue;
9}
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>CSS :hover property</title>
6
7 <style>
8 a {
9 background-color: powderblue;
10 transition: background-color 0.5s;
11 }
12
13 a:hover {
14 background-color: gold;
15 }
16 </style>
17 </head>
18 <body>
19
20 <a href="#">Try hovering over this link.</a>
21
22 <!-- The :hover CSS pseudo-class matches when the user interacts
23 with an element with a pointing device, but does not necessarily activate
24 it. It is generally triggered when the user hovers over an element with
25 the cursor (mouse pointer). -->
26
27 </body>
28</html>
1/* Simple CSS color transition effect on selector */
2
3div {
4 color: white;
5 background-color: black;
6}
7
8div:hover {
9 background-color: red;
10}
11
12
13/* Additional transition effects on selector */
14
15div {
16 background-color: black;
17 color: white;
18 height: 100px;
19 transition: width 1.5s, height 3s;
20 width: 100px;
21
22}
23
24div:hover {
25 background-color: red;
26 height: 300px;
27 width: 150px;
28}
29
1//Select and style a link when you mouse over it:
2
3 a:hover
4 {
5
6 background-color: yellow;
7
8 }
9
10
1.my-div:hover{
2 background-color: #f00; /*RED*/
3}
4/*When mouse come over .my-div the background-color will be changed to red*/