Advanced Search

Return to Snippet

Revision: 13621
at April 29, 2009 14:00 by justinseiter
Initial Code 
.message .controls { display: none; }  
.message:hover .controls { display: block; }


<!-- Place inside head -->
<!--[if lt IE 7]>  
     <style type="text/css" media="screen">  
          .message .controls { display: block; }  
     </style>  
<![endif]-->
Initial URL 
http://www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/
Initial Description 
When you hover over the “message” div, the “controls” div inside it will appear, along with all of its content, giving you the same functionality as used by the Twitter web app.

There may be an issue with accessibility because screen readers may not be able to read the hidden <div.> on top of it.

This technique should of course be used with restraint because you don’t want to hide your important controls; but if used correctly, it can be useful for cleaning up your interface by removing those extra utility links that you don’t want to show up at all times.

Note that this doesn’t work in IE6, so you’ll need to override the hiding property in your IE6-specific style sheet or, if you don’t have one, simply use the IE6-specific source inside the head section of your code.
Initial Title 
Show Controls on Hover
Initial Tags 
css
Initial Language 
CSS