悬停时显示控件

Posted 2021-02-26

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.

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