Hover HTML Example

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

About the author

admin

View all posts

Leave a Reply

Your email address will not be published. Required fields are marked *