使用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); 
    }  
);