/* Changes an element's color on hover */
.selector {
background-color: black;
}
.selector:hover {
background-color: blue;
}.a:hover{background-color: black;}.my-div:hover{
background-color: #f00; /*RED*/
}
/*When mouse come over .my-div the background-color will be changed to red*/<!DOCTYPE html>
<html>
<body>
<!-----mohammad-alshraideh----->
<h2 class="c" onclick="this.innerHTML='javascript html events'">JavaScript HTML Events</h2>
<h2 class="do" onclick="this.innerHTML='Great'">Click on this text!</h2>
<h2 class="dont" onclick="this.innerHTML='Ooops!'">don't Click here</h2>
<style>
.dont{
background-color: rgb(26, 206, 86);
width : 190px;
height:70px;
}
.dont:hover{
width : 70px;
height:190px;
background-color: #bd1111;
}
.do{
background-color: rgb(26, 206, 86);
width : 190px;
}
</style>
</body>
</html>
<style>
a.special:link {
color: green;
}
a.special:visited {
color: red;
}
</style>
<p><a href="#">This is a standard link, it will become purple when clicked</a></p>
<p><a class="special" href="#">This is a special colored link and become red when clicked</a></p>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css" />hover