からimgを選択

Question

お願いします。私はメニュー 'li.menu_item'にカーソルを置いて、 'img'を選択したい：$（ 'li.menu_item a'）。children（ 'img'）...しかし、これは動かない...あなたは<a>タグにネストされ<div>タグを持っているように見えることを除いて

$('li.menu_item a').hover(
    function() { 
     $(this).find('.img_mask').stop().animate({ "opacity" : .8 }); 
    }, 
    function() { 
     $(this).find('.img_mask').stop().animate({ "opacity" : .0 }); 
    } 
); 

：私はそれが

<ul class="menu"> 
      <li class="menu_item"><a class="selected" href="#"> domů </a></li> 
      <li class="menu_item"><a href="#"> 
       <div> 
        <img class="img_mask" src="design/btndark.png" /> 
       </div> 
       <div class="menu_mask">fotografie</div> 
      </a></li> 
      <li class="menu_item"><a class="nonselect" href="#"> 
       <div> 
        <img class="img_mask" src="design/btndark.png" /> 
       </div> 
       <div class="menu_mask"> 
        rezervace 
       </div> 
      </a></li> 
      <li class="menu_item"><a class="nonselect" href="#"> 
       <div> 
        <img class="img_mask" src="design/btndark.png" /> 
       </div> 
       <div class="menu_mask"> 
        konetakt 
       </div> 
      </a></li> 
      <li class="cl"></li> 
     </ul> 

<script type="text/javascript"> 

$(function() { 

    $('.img_mask').animate({ 
     "opacity" : .0 
    }); 

    $('li.menu_item a').hover(
     // problem je jeste v tom, ze pokud rychle prejizdim pres prvky, tak se "dopredu najedou" a kdyz jsem uz mimo obrazek, jeste blikaji... 
     // tento problem lze vyresit tim, ze zkontruluju jestli bylo animovano 
     // takze reknu funkci hover, ze nejprve ma zastavit a az pak animovat 
     function() { 
      $('.img_mask').stop().animate({ "opacity" : .8 }); 
     }, 
     function() { 
      $('.img_mask').stop().animate({ "opacity" : .0 }); 
     } 
    ); 

}); 

</script> 

Answer 1

使用thisは、現在の項目が推移しているを参照するために... jQueryのでアニメーション化します。 <a>の要素をdisplay:blockなどと変更した場合や、inline以外の場合は、これは無効です。