Show Controls on Hover

/ Published in: CSS
Save to your folder(s)

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 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.

Copy this code and paste it in your HTML
  1. .message .controls { display: none; }
  2. .message:hover .controls { display: block; }
  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


RSS Icon Subscribe to comments

You need to login to post a comment.