使用jquery在图像悬停上隐藏多个span类

Question

我试图产生一种效果，当一个人在图像上悬停一些跨度类时，在这种情况下命名为.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);  
   }    
);