jQuery的鼠標懸停淡入淡出效果

Question

我一直在學習如何做一個jQuery鼠標懸停效果從 http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/

我怎麼有這樣的效果三個獨立的按鈕？當我複製它們時，我一直存在Div的重疊問題，我無法將它們從彼此移開。對不起，如果我最初的問題是混亂！ 這裏是我的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

下面是應該開始你在正確的道路上一個小提琴：

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

基本上是因爲div的內元素是絕對定位，這個div沒有任何測量值（這裏有一個技術詞彙，但是逃脫了我）。你基本上需要明確地設置div的寬度和高度。你可以在CSS中做到這一點，或動態生成JavaScript/jQuery中的CSS。這裏是一個使用jQuery的例子。

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

例描繪了數千字，這可以幫助別人理解這個問題，如果他們看到了這個問題。點擊

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