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"); 
    }); 

});