title: How can i do hover effect on a css sprite image?
body: <p>I am using a sprite image. And each icon on sprite has same but different color for hover effect. Well when i mouseover on the icon, hover effect is working. But i would like to get that hover (change image) on div mouseover instead of the span. (since span width specified as icon size, i couldn't find a solution on that)</p>
  
  <p>If you please check below css and html, you'll understand what i need. I want the "search_forums" (span) icon to change on "each_option" div mouseover.</p>
  
  <p>Thanks in advance</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.each_option{
  height:30px;
  border-bottom:1px solid #ffe869;
  font-size:14px;
  padding-top:9px;
  color:#707070;}
  
  .forumdisplay_sprite{
  background-image:url(../img/forumdisplay_sprite.png);
  background-repeat:no-repeat;
  display:block;
  text-indent:-99999px;
  overflow:hidden;}
  
  .search_forums{height:24px;width:24px;background-position:-24px -48px;}
  
  .search_forums:hover{height:24px;width:24px;background-position:-24px -72px;}
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="each_option"&gt;
  &lt;span class="forumdisplay_sprite search_forums"&gt;&lt;/span&gt;
  &lt;a href="#"&gt;Search Forums&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>SPRITE ICONS</strong>
  <a href="http://i.imgur.com/HJoxi.png" rel="nofollow">Sprite icons image</a></p>
  
  <hr>
  
  <p>Sorry for not being clear enough. My original/previous style was like on below given page. Then after reading an article about better css and optimizing, i decided to use sprite images. But i have this problem...</p>
  
  <p>Here is what i would like to do : <a href="http://jsfiddle.net/stckhlm/EXZKa/" rel="nofollow">http://jsfiddle.net/stckhlm/EXZKa/</a></p>
  
  <p>Is it possible to get the hover (change wrapper div's background color and inner div's background image same time) effect like on above example ? If not, then i'll have to stop using the sprite images or hover effect... </p>