Quick Reach
What is the hover state?
The hover state occurs when the mouse is over the certain element of the web document. Generally, it is used for HTML links. However, the hover state also applies to the other elements like div, headings, paragraphs etc.
>>See an example of hover in div
This tutorial shows how you can apply different properties as the hover state occurs in different elements including the links.
Example of hover state in HTML links
This example shows how to apply different properties in the hover CSS state of HTML link. As the mouse is over a link the font style and the color will be changed in the hover state. See the demo by clicking the link or image:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
<html>
<head>
<style>
/*Using hover */
.link1:link
{
color: #355681;
font-style: normal;
font-size: 15px;
}
.link1:hover
{
color: #E84940;
font-size: 17px;
}
.link2:link
{
color: #355681;
font-style: italic;
font-size: 15px;
text-decoration:none;
}
.link2:hover
{
color: #008000;
font-style: normal;
font-size: 15px;
text-decoration:underline;
}
</style>
</head>
<body>
<div>
<a href="http://www.example.com" class="link1">Example link without border</a><br /><br />
<a href="http://www.example.com" class="link2">Example link without underline</a>
</div>
</body>
</html>
|
You can use the CSS a: hover to apply properties in link’s hover state. As you bring the mouse over the first link its font size is changed in the demo.
The hover state of div element example
As mentioned earlier, not only the hover state applies to the HTML links but also to the div element as well. Following example shows how div hover state works. The example applies border and text color to a div element as hover (mouseover) state happens in the div by using hover in CSS.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<html>
<head>
<style>
/*Using hover */
.div_ex
{
border: dotted 4px #355681;
color: #355681;
}
.div_ex:hover
{
color: #E84940;
border: solid 4px #355681;
}
</style>
</head>
<body>
<div>
This is div element
</div>
</body>
</html>
|
You can see, as the mouse is over the div and hover state occurred, the border style of div changed to the solid.
Using CSS hover in heading example
You can apply the CSS hover properties to the headings in HTML document as well. The example below shows changing the properties of heading 1 as hover state occurs.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<html>
<head>
<style>
/*Using hover */
h1
{
font-size: 15px;
color: #355681;
}
h1:hover
{
font-size: 20px;
color: #E84940;
}
</style>
</head>
<body>
<h1>This is heading1 with hover state example</h1>
</body>
</html>
|
Using hover to <p> element
Similarly, you can apply CSS in hover state to the paragraph tag as well. The following example shows how to change some properties of the <p> tag as the hover state occurs.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<html>
<head>
<style>
/*Using hover */
.p_ex
{
border: dotted 4px #355681;
color: #355681;
}
.p_ex:hover
{
color: #E84940;
border: solid 4px #355681;
}
</style>
</head>
<body>
<p>
This is paragraph element
</p>
</body>
</html>
|
Also see: CSS link
Leave A Comment?