jQuery触发父级鼠标悬停的子元素

Question

我有一个嵌套div的列表，其中包含两个堆叠在一起的图像。我建立了一个悬停效果，可以创建平滑的过渡效果。但是，只有在鼠标悬停在图像上时才会触发该效果，而当鼠标悬停在链接上方时不会触发该效果。这里是我的一个简短的想法代码：

<ul id="shortcuts" class="sitewidth"> 
    <li> 
     <a href="#"> 
      <div class="shortcuticon box"> 
       <img src="images/icon-learn.png" alt="" class="a"> 
       <img src="images/icon-learn-hover.png" alt="" class="b"> 
      </div> 
     </a> 
    </li> 
    <li> 
     <a href="#"> 
      <div class="shortcuticon box"> 
       <img src="images/icon-learn.png" alt="" class="a"> 
       <img src="images/icon-learn-hover.png" alt="" class="b"> 
      </div> 
     </a> 
    </li> 
    <li> 
     <a href="#"> 
      <div class="shortcuticon box"> 
       <img src="images/icon-learn.png" alt="" class="a"> 
       <img src="images/icon-learn-hover.png" alt="" class="b"> 
      </div> 
      <h2>Hello World!</h2> 
     </a> 
    </li> 

    <script type='text/javascript'> 
     $(document).ready(function(){ 
      $("img.a").hover(function() { 
       $(this).stop().animate({"opacity": "0"}, "slow"); 
      }, function() { 
       $(this).stop().animate({"opacity": "1"}, "slow"); 
      }); 
     }); 
    </script> 
</ul> 

我意识到霍夫功能应该#shortcuts li a来完成，而不是图像本身。但是这个代码正在工作，并会给你一个我正在寻找的概念。非常感谢您的善意帮助。

Answer 1

试试这个： - 不确定你想要如何显示，但这里是我的尝试。

只有一个图像*

http://jsfiddle.net/tQwDk/

两个图像

http://jsfiddle.net/GcJG5/

$("#shortcuts li").hover(

function() { 
    $('img.a', this).stop().animate({ 
     "opacity": "0" 
    }, "slow"); 
}, 

function() { 
    $('img.a', this).stop().animate({ 
     "opacity": "1" 
    }, "slow"); 
}); 

Answer 2

尝试

$(document).ready(function() { 
    $("a").has('img.a').hover(function() { 
      $('img.a', this).stop().animate({ 
         "opacity" : "0" 
        }, "slow"); 
     }, function() { 
      $('img.a', this).stop().animate({ 
         "opacity" : "1" 
        }, "slow"); 
     }); 
}); 

Answer 3

我首先想到的是一个悬停事件添加到Hello Worldh2并调用trigger上的图像hover事件：

$("#shortcuts li a h2").hover(function(){ 
    $(this).parent.find('img.a').trigger('hover'); 
}); 

遗憾的是无法trigger伪选择像hover。

幸运的是，我相信下面会给你你需要的结果。您可以在父链接上使用mouseenter和mouseleave，然后查找子图像并为其设置动画。

$(document).ready(function(){ 
    $("#shortcuts li a").mouseenter(
     function() { 
      $(this).find('img.a').stop().animate({"opacity": "0"}, "slow"); 
    }).mouseleave(
     function() { 
      $(this).find('img.a').stop().animate({"opacity": "1"}, "slow"); 
    }); 

});