In this code the css pseudo class hover is applied to image using its id.
Here is the code:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!DOCTYPE html>
<html>
<head>
<style>
img {z-index:0;}
#img1{position: absolute;top:0px;left:0px;}
#img2{position: absolute;top:20px;left:20px;}
#img3{position: absolute;top:40px;left:40px;}
#img1:hover {
z-index:3;
}
#img2:hover {
z-index:3;
}
#img3:hover {
z-index:3;
}
</style>
</head>
<body>
<img id="img1" src="w3css.gif" width="100" height="140" />
<img id="img2" class="imgc2" src="300x300_72.gif" width="100" height="140"/>
<img id="img3" class="imgc3" src="index.jpg" width="100" height="140"/>
<a href="http://www.w3schools.com" class="links">w3schools.com</a>
<a href="http://www.wikipedia.org" clas="links">wikipedia.org</a>
<p><b>Note:</b> The :hover selector style links on mouse-over.</p>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
If you copy this code into a html file and open in browser you will observe that the images come on top when mouse hovers over them. I just didn't have the motivation to study this subject and thought that posting whatever i am working on will be a motivation for me to carry forward the work. I don't like to work alone.
Here is the code:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!DOCTYPE html>
<html>
<head>
<style>
img {z-index:0;}
#img1{position: absolute;top:0px;left:0px;}
#img2{position: absolute;top:20px;left:20px;}
#img3{position: absolute;top:40px;left:40px;}
#img1:hover {
z-index:3;
}
#img2:hover {
z-index:3;
}
#img3:hover {
z-index:3;
}
</style>
</head>
<body>
<img id="img1" src="w3css.gif" width="100" height="140" />
<img id="img2" class="imgc2" src="300x300_72.gif" width="100" height="140"/>
<img id="img3" class="imgc3" src="index.jpg" width="100" height="140"/>
<a href="http://www.w3schools.com" class="links">w3schools.com</a>
<a href="http://www.wikipedia.org" clas="links">wikipedia.org</a>
<p><b>Note:</b> The :hover selector style links on mouse-over.</p>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
If you copy this code into a html file and open in browser you will observe that the images come on top when mouse hovers over them. I just didn't have the motivation to study this subject and thought that posting whatever i am working on will be a motivation for me to carry forward the work. I don't like to work alone.
No comments:
Post a Comment