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.a:hover{background-color: black;}
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//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*/
1/* css file */
2.callitwhatever:hover
3{
4 background: none;
5}
6
7/* HTMl File */
8<li><a href="#" class="callitwhatever"> Logo</a></li>