jQuery mouseover淡入淡出效果

Question

I've been learning how to do a Jquery mouse over effect from http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/

How do I have three separate buttons with this effect? I keep having a problem of the Divs overlapping when i duplicate them and I can't move them away from each other. Sorry if my initial question was confusing! Here is my jsfiddle: http://jsfiddle.net/japaneselanguagefriend/EgDqy/

<div class="fadehover"><img src="button 1" alt="" class="a" /><img src="button 1 roll" alt="" class="b" /></div>

<div class="fadehover"><img src="button 2" alt="" class="c" /><img src="button 2 roll" alt="" class="d" /></div>

Answer 1

Here is a fiddle that should start you on the right path:

http://jsfiddle.net/EgDqy/12/

<div class="cell">

<img src="http://www.charlesayoub.com/news/public/uploads/images/895377521.jpeg" alt="" display /> 

<img src="http://static.ddmcdn.com/gif/smart-car-1.jpg" class="fader" alt="" />

</div>


<div class="cell"> 

<img src="http://www.charlesayoub.com/news/public/uploads/images/895377521.jpeg" alt="" /> 

<img src="http://static.ddmcdn.com/gif/smart-car-1.jpg" class="fader" alt="" />

</div>

<div class="cell"> 

<img src="http://www.charlesayoub.com/news/public/uploads/images/895377521.jpeg" alt="" /> 

<img src="http://static.ddmcdn.com/gif/smart-car-1.jpg" class="fader" alt="" />

</div>​


$(".cell").hover(
   function() {
      $(this).find('.fader').fadeOut("slow");
   },
   function() {
      $(this).find('.fader').fadeIn("slow");
   }
);


.cell{ width:100px; display:inline-block; position:relative; }
.cell img { width:100px; position:absolute; top:0; left:0; }

Answer 2

Basically because the inner elements of the div's are absolute positioned, the div's do not have any measurements (there is a technical word for this but is escapes me). You basically need to explicitly set the width and height of the div's. You can do this in CSS or dynamically generate the css in javascript/jquery. Here is an example using jquery.

http://jsfiddle.net/EgDqy/13/

Example paints a thousands words, this may help others understand the problem if they see this question. Click the button on the right

http://jsfiddle.net/EgDqy/16/