Posted By

justinseiter on 04/29/09


Tagged

css hover


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

nb109


Show Controls on Hover


 / Published in: CSS
 

URL: http://www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/

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.

  1. .message .controls { display: none; }
  2. .message:hover .controls { display: block; }
  3.  
  4.  
  5. <!-- Place inside head -->
  6. <!--[if lt IE 7]>
  7. <style type="text/css" media="screen">
  8. .message .controls { display: block; }
  9. </style>
  10. <![endif]-->

Report this snippet  

You need to login to post a comment.