Pseudo-Classes in CSS - Hover Effects

Introduction: This tutorial is on how to create hover over effects in CSS. HTML: For this, we need some basic HTML to style with our CSS... CSS: Now that we have some basic HTML elements, we want to give the elements some basic CSS styling... Pseudo-Classes: There are certain classes within CSS (Pseudo-classes) which are similar to the effect of listeners in, for example, jQuery. This means that the classes are activated under certain conditions; the pseudo-class I will be using for this tutorial is 'hover' - this will be activated once the user's mouse enters the area of the element with the 'hover' pseudo-class. First we need to create our class with the extension of the 'hover' pseudo-class, we do this by writing the type of identifier (. for classes, # for IDs), followed by the class/ID name, followed by a colon (:) and then the name of the pseudo-class, in our case it's 'hover'... Now, once the user's mouse enters the area of any HTML element with the class of 'hoverable', the above 'hover' class would be activated. Let's simply write in a border for this effect... This will give the .hoverable div a bottom border of solid white with a 1 pixel width once the user's mouse hovers over the element. Finished! Here is the full source...