Hover HTML Example

Sharing is healthy !!

Hey guys!! Today we will learn hover html example.

The onmouseover event will materialize when mouse is moved onto html event.

The onmouseout event will materialize when mouse is moved out of html event.

Example: Hover HTML Example

Also Read – HTML Basic

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Flower Brackets - code here</title>
<style type="text/css">
.hover1,.hover2
{
font:bold 10pt Arial;
padding:4px;
}
.hover1
{
background-color:#E3EAB2;
color:black;
}
.hover2
{
background-color:#0EAB07;
color:white;
}
p.colorchange
{
color:#7CFC00;
}
p.colorchange:hover
{
color:#228B22;
}

</style>
</head>

<body>

<p class="colorchange">Text color change - Hover Example.</p>

<input type="button" class="hover1" value="Hover Button Example" onmouseover="this.className='hover2';"
onmouseout="this.className='hover1';" />

</body>
</html>

Output:

Hover HTML Example

Sharing is healthy !!