Douglas on Web Applications

Better Rollover with CSS & jQuery

My third pass at a rollover and my favorite solution by far. This one uses minimal code, avoids flickering while also decreasing load times.

Basically create each image or button with active and over states next to one another. For for our example, side by side. We apply the image as a background, defining the width of the space as half our image (so only the active state shows). Then when the use hovers, we reposition the background to show the active state only.

 
  $(function() {
	$("#teasers div").hover(function() {
	  $(this).css('background-position', 'top right');
	}, function() {
	  $(this).css('background-position', 'top left');
	});
  });
 

Tags: better, css, rollover, sliding

Minimum CSS Required to Clear Floats

Minimum required CSS to clear floats across all modern browsers:

<pre lang="css">

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  height: 0;
  content: " ";
  clear: both;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

</pre>

Tags: clearfix, css, floats, minimum