使用jquery隱藏圖像懸停上的多個span類

Question

我試圖在圖像上懸停多個span類（在本例中名爲.highlight）淡出並在淡出時淡入淡出的效果。

這是我到目前爲止有：

$(function() { 

    var trigger = $('.imglist img'), 
     target = $('.highlight'); 

     trigger.hover(function() { 
      target.fadeOut('slow'); 
     }); //end inner function 

}); //end outer function 

HTML

<span class="highlight">Opera Krakowska</span> 

（我有整個這個類應用到他們的網站很多頭銜。）

<div class="imglist"> 
    <a href="#"><img src="images/projects/operakrakowska/operakrakowska_01.png" width="750px"></a> 
    </div> 

有任何想法嗎？ 在此先感謝！

Answer 1

.hover(handlerIn, handlerOut)

試試這個：DEMO

$(function() { 

    var trigger = $('.imglist img'), 
     target = $('.highlight'); 

     trigger.hover(function() {//when mouse over 
      target.fadeOut('slow'); 
     },function(){//when mouse out 
      target.fadeIn('slow'); 
     }); 
}); 

Answer 2

http://jsfiddle.net/ufottqh0/

$('.imglist').find('.highlight').css('opacity', 1); 

$('.imglist .hoverImg').hover( 
    function(){ 
     $('.highlight').stop().fadeTo('slow', 0.4); 
    }, 
    function(){ 
     $('.highlight').stop().fadeTo('slow', 1); 
    }  
);