Today we learn about Links and Pseudo-Classes in CSS. I have made tutorials about rollover's here and here, but this is something different and we talk about links & elements where we can put Pseudo-Classe, on a div, text,etc…
Pseudo-Classes:
:link
:visited
:active
:hover
:focus
We start with an exemple to use :hover pseudo-class on a image
1. Let's create the CSS:
| <style type="text/css">
body { background-image: url("bg.gif"); } img { border-width: 4px; border-color: #CCCCCC; border-style: solid; img:hover { border-color: white; } div { height: 10px; width: 80px; } div:hover { background-color: #CCCCCC; color: white; } </style> |
2. Now we need to create the HTML:
| <html>
<head> <style type="text/css"> body { background-image: url("bg.gif"); } img { border-width: 4px; border-color: #CCCCCC; border-style: solid; img:hover { border-color: white; } div { height: 10px; width: 80px; } div:hover { background-color: #CCCCCC; color: white; } </style> </head> <body> <br><br> <center>:hover Pseudo-Class on a element (img) <br><br> <img src="/img_articles/15094/css.png"> <br><br> :hover Pseudo-Class on a element (div) <br><br> <div>PiticStyle<div> </body> </html> |
That's it! You can create this for any element you want ( paragaphs, headings, links, etc). From here you can download my files and here is the final result. Thank you!
More HTML and CSS: 
