CSS hover selector is used to apply style on html element when mouse is on html element like div, anchor link (<a> tag), p etc. We can apply many effects on elements when mouse is on them like color, background color, font etc.
Syntax :
<style>
a
{
color: #000000;
}
a:hover
{
color: #FF0000;
}
a:active
{
color: #33CC00;
}
</style>
Example :
<html>
<head>
<title>Learn CSS hover selector tutorials by aryatechno</title>
<style>
a
{
color: #000000;
}
a:hover
{
color: #CC9900;
}
a:active
{
color: #336600;
}
.content {
width: 35%;
height: 100px;
padding: 10px;
background-color: #0000FF;
border:#000000 solid 1px;
color:#FFFFFF;
float:left;
}
.content:hover{
background-color: #FFFFCC;
color:#000000;
}
</style>
</head>
<body>
<h2><a href="#">Applied hover effects for anchor link (<a> tag).</a></h2>
<div class="content">
Applied on mouse hover effects for div tag. Applied on mouse hover effects for div tag. Applied on mouse hover effects for div tag. Applied on mouse hover effects for div tag. Applied on mouse hover effects for div tag. Applied on mouse hover effects for div tag. Applied on mouse hover effects for div tag.
</div>
</body>
</html>
Comments