[jQuery] Sprite画像をマウスオーバーで位置をずらしてロールオーバーを表現

小一時間悩んだのでメモ。

HTML

<p style="width: 128px; display: block; height: 128px; overflow: hidden" class="sprite-image-block">
  <img class="sprite-image" height="256" width="128" style="border:1px solid red" />
<p>

JavaScript

$('.sprite-image-block .sprite-image').each(
 function() {  
  $(this).mouseover(function(){$(this).css('top',-128);});  
  $(this).mouseout(function(){$(this).css('top',0);}); 
 }
)

Demo

Leave a Reply