Hover HTML Example

Hey guys!! Welcome to flower brackets blog. Today we will learn hover html example.

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

Also Read – HTML Basic

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

Example: hover HTML example

<!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

Related Posts