Lesson 7: Using CSS :hover (Mouse Over)

Using the :hover psuedo-class
Hover is one of my favorite things about css, while, when it comes to firefox atleast. Internet explorer still does not support using hover on really anything besides links. But hopefully they will change that soon. Either way, I want to go ahead and show you in this tutorial how to use hover to make some cool effects on your website. Most of the things in this hover tutorial will not work in internet explorer (as of IE7).

Creating a simple dropdown box with CSS hover
Lets pretend that you need a dropdown box on your website, maybe you have alot of information but not enough room to display it, or maybe you just want a cool sidebar that does not take up much room. Hover is an amazingly simple way to do this without using javascript (although you will have to use JS to do the same thing in IE)

Step 1:
Ok, first we need to create the box, we will do this using a div tag in html. Here is the example html:
<div class="dropdown">I am a dropdown box!<br><br>some random info </div>

Step 2:
Ok, simple enough! Now we need to write some CSS, we told our div to use the class called dropdown, so we need to name our css selector ".dropdown" Here is the example CSS:
.dropdown {
width: 300px;
height: 20px;
background-color: #00FF00;
overflow: hidden;
}

First you should notice the width and height attributes, px stand for pixels, so the resulting box would be 300 by 20 pixels. The next attribute sets the background color of the box, and the overflow attribute means not to make the box bigger if there is more information than it can fit.

Step 3:
It still does not drop down yet though, we still need to add the css that makes it do so, so we need to make a whole new css rule using the :hover psuedo-class. You can see in the first .dropdown example there is a height attribute, this is what we will be changing. And here is the example:

.dropdown:hover {
height: 100px;
}

Now, if your using firefox, the box will expand down when your mouse moves over it. Try it out:

Its as simple as that in firefox! So far, as of writing this, it is not supported through internet explorer (IE7). You will have to resort to using javascript to do the same thing.

That is all for now! Lesson 8 coming soon.. I hope my tutorials are helpin someone, I mostly write them to help me learn, its like taking notes to the next level, but if anyone else can learn from them it makes it that much better :) If your still itchin to learn, check out some of the resources on the sidebar, all of these sites have helped me a great deal.