New Posts

Monday, June 14, 2010

The :hover Pseudo class

Lets get into something a bit more interesting now. You build your website, and you find you need some way to say hide parts of your navigation, you need to hide info until requested, heck you may even just want to keep say a small picture of an item hidden until your mouseover a little camera icon.

This can be accomplished with CSS alone.

We will need to use the :hover CSS pseudo class. A pseudo class is a special type of CSS definition, if you will, that allows you to give an object certain effects when the mouse interacts with it in some way. For instance have an area show up when the mouse is hovered over an element.

To get the effect we want, we'll apply the hover pseudo class to our div or section that we wish to hide or show when the mouse hovers over it.


Lets look at a basic example:


CSS



#basic{
border:1px solid #DDDDDD;
background-color:#CADBED;
width:300px;
height:23px;
overflow:hidden;
}


#basic:hover{
height:auto;
}



Html



<div id='basic'>
Hover Here <br>
This content will be seen when hovering over the
titlebar. you could not see it before.
This content will be seen when hovering over the
titlebar. you could not see it before.
This content will be seen when hovering over the
titlebar. you could not see it before.
</div>





Hover Here


This content will be seen when hovering over the
titlebar. you could not see it before.
This content will be seen when hovering over the
titlebar. you could not see it before.
This content will be seen when hovering over the
titlebar. you could not see it before.





Move your mouse over the "Hover Here" text to see it in action. This is a very basic collapsible panel. It uses the hover Pseudo Class and changes only the height definition of the div from the set 30px; to auto so it automatically grows to fit its content.




Of course you can get a bit fancier if you need to, and give the panel a nicer header so you clearly separate the title from the contents.



CSS



#hideaway{
border:1px solid #DDDDDD;
background-color:#CADBED;
width:300px;
height:23px;
overflow:hidden;
}

#hideaway h3{
margin:0px;
padding:0px;
font-family:Verdana;
background-color:#E6DFC8;
border-bottom:1px solid #CCCCCC;
}


#hideaway:hover{
height:auto;

}




Html



<div id='hideaway'>
<h3>Hover Mouse over this Area</h3>
This content will be seen when hovering over the
titlebar. you could not see it before.
This content will be seen when hovering over the
titlebar. you could not see it before.
This content will be seen when hovering over the
titlebar. you could not see it before.
</div>




Hover Mouse over this Area


This content will be seen when hovering over the
titlebar. you could not see it before.
This content will be seen when hovering over the
titlebar. you could not see it before.
This content will be seen when hovering over the
titlebar. you could not see it before.




This one now has a header to hover over, and a defined content section.




There are many things to be done with the Hover pseudo class.

Say you have a list of Products in a table and you wish to add a popup thumbnail of the product image to for instance:

Hover over the camera icon to see a pic pop up.







ProductDescriptionPricePicture
Product 1This is an average Product$29.99
thumbnail
Product 2This is a great Product$9.99
thumbnail
Product 3This is an expenive Product$99.99
thumbnail



CSS



.thumb{
background:url('/images/cameraico48.png');
width:48px;
height:48px;
}

.thumb img{
width:128px;
height:128px;
display:none;
}
.thumb:hover{
background:url('none');
}

.thumb:hover img{
position:absolute;
display:block;
}



<table border=0 style="border:1px solid #DDDDDD;"><tr><td>Product</td><td>Description</td><td>Price</td><td>Picture</td></tr>

<tr><td>Product 1</td><td>This is an average Product</td><td>$29.99</td><td><div class="thumb"><img src="/images/picicon.png" alt="thumbnail"></div></td></tr>

<tr><td>Product 2</td><td>This is a great Product</td><td>$9.99</td><td><div class="thumb"><img src="/images/picicon.png" alt="thumbnail"></div></td></tr>

<tr><td>Product 3</td><td>This is an expenive Product</td><td>$99.99</td><td><div class="thumb"><img src="/images/picicon.png" alt="thumbnail"></div></td></tr>

</table>







Lets move onto Navigation. When you are creating menus, you may have options in the menu, and maybe some sub options you wish to group together under an option, but you do;t necessarily need to have them displayed all he time. You can use the hover pseudo class to make your menu a bit more dynamic.

For example, if you hover over options 2 and 4 you'll get extra options displayed:



Now the Code and CSS at work:


CSS



#nav{
border:2px solid #DDDDDD;
background-color:#C3D6CB;
width:180px;
}

#nav li{
height:20px;
}

#nav li ul{
display:none;
}

#nav li:hover{
color:#FFFFFF;
height:auto;
border:1px solid #AAAAAA;
}

#nav li:hover ul{
display:block;
background-color:#108541;
}

#nav li li:hover{
background-color:#14E36A;

}




Html



<div id="nav">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a>

<ul>
<li><a href="#">sub Option 1</a></li>
<li><a href="#">sub Option 2</a></li>

<li><a href="#">sub Option 3</a></li>
</ul>
</li>
<li><a href="#">Option 3</a></li>

<li><a href="#">Option 4</a>
<ul>
<li><a href="#">sub Option 1</a></li>

<li><a href="#">sub Option 2</a></li>
<li><a href="#">sub Option 3</a></li>
</ul>

</li>
</ul>
</div>




This is getting quite complex, s lets take a closer look at what the CSS is doing:

First I have the main navigation container, that will hold my options. Then I simply specify a starting width for my nav options using the list tag.

This is where it gets interesting:

#nav li ul{
display:none;
}

Here I specify that any ul tags inside a list tag that is inside an element with an ID of nav should not be displayed to begin with.

#nav li:hover{
color:#FFFFFF;
height:auto;
border:1px solid #AAAAAA;
}

#nav li:hover ul{
display:block;
background-color:#108541;
}

Now the hover pseudo class comes into play. First I just use it to change the color of the hovered option so we know its being hovered.

The second line, specifies what to do with the originally hidden ul that holds the sub option, when the list item they are inside of is hovered. That is they become visible.


Now you can of course style the items as you see fit, removing the bullet, changing fonts etc.. to suit your needs but this is the basic functionality.




For our final example lets suppose we have a horizontal menu, and we need to give it drop down menus, that don't actually push the content under them down as the appear.

For this we will need to actually use the position attribute. I'll go into more depth about this attribute in a later post, but for now, you should now, that unless it is absolutely necessary to be used, the position attribute should not be used. This is because it changes how elements are treated and can cause lots of confusion with its results. Once you know what it does and how to work with it it can be useful, but again its not something you'll want to use all over the page.

Lets look at our drop down example now:


File

  • Option 1
  • Option 2
  • Option 3
  • Option 4

 




CSS



#nav2{
height:30px;
width:350px;
border:1px solid #AAAAAA;
background-color:#777777;
position:absolute;
}

#nav2 div{
float:left;
background-color:#777777;
height:28px;
overflow:hidden;
width:116px;
}

#nav2 div:hover{
background-color:#000000;
color:#FFFFFF;
height:auto;
}

#nav2 p{
clear:both;
}

#nav2 div h3{
margin:0;
padding:0;
text-align:center;
}

#nav2 div.dropdown li:hover{
background-color:#FFFFFF;
color:#000000;


}


Html



<div id="nav2">
<div class="dropdown">
<h3>File</h3>
<ul>
<li>Option 1</li>

<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>

</div>
<div class="dropdown">
<h3>Edit</h3>
<ul>
<li>Option 1</li>
<li>Option 2</li>

<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>

<div class="dropdown">

<h3>View</h3>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>

<li>Option 4</li>
</ul>
</div>
<p>&nbsp</p>
</div>
<br>

<br>




This as you can see takes quite a bit more CSS to get it to function.
Notice the single use of the position:absolute; attribute for the nav2 container which will hold our menus. This prevents the drop downs from pushing on the content below them, and instead just open up above it as one would expect.

Basically all I do is float our menu divs, and have them change heights when hovered over so they can show the sub options with in them.

This are just a few examples of how useful the hover pseudo class is in modern browsers.

Now there is a caveat here. IE6, and you know it had to be that particular browser, does not support the hover pseudo class in anything but link tags.

<a href="#">Option 4</a>

So all these techniques fail miserably. Thankfully, users are moving away from IE6, and as I mentioned in a previous post the percentage of users still working on IE6 is so small its almost not worth going out of your way to code something that will work on it.

If for some reason the examples don't work correctly here you can click here to see all the examples in action.