jQueryを使用して非表示になっている画像を表示する方法

Question

jQueryを使用して隠されている画像を表示する際に問題が発生しています。

私はjQueryを使ってクラス 'img.zoom'でイメージを隠しました。私は、画像が入っているリスト項目の上にマウスカーソルを置いて隠れている画像を見せたいと思っています。私はこれを行うことができますが、それはその画像を持つすべてのリスト項目に影響します。私はそれがその特定のリスト項目に影響を与えたいだけです。

助けてください。

マイコード：

<ul class="portfolio"> 
    <li> <img src="images/example.jpg" width="200" height="200" alt="Example" /> <img src="images/row.png" width="11" height="11" class="zoom" /> </li> 
    <li><img src="images/example.jpg" width="200" height="200" alt="Example" /><img src="images/row.png" width="11" height="11" class="zoom" /></li> 
    <li><img src="images/example.jpg" width="200" height="200" alt="Example" /></li> 
    <li><img src="images/example.jpg" width="200" height="200" alt="Example" /></li> 
</ul> 

私のjs：事前に

// hide zoom button 
$("img.zoom").hide(); 
// show zoom button on hover 
$("ul li").hover(function() { 
$('img.zoom').show(); 
}); 

感謝します。

クレイグ

UPDATE

私はそう

$('img.zoom', this).toggle(); 

のようなコードを調整することによって、これを動作するように管理している。しかし、これは内外離れfadeToggleにあるのでしょうか？

Answer 1

コールバック関数の中で、あなたのホバー機能

$(this).find('img.zoom').show(); 

thisでこれを行いますので$(this)推移しli表すjQueryオブジェクトに解決され、現在のDOM要素を表し、findは、CSSがに基づいて選択を行いますそれの子孫はliです。実際

Answer 2

、完全では、あなたがフェード欠けている場合は明の答え1歩

$('ul li').hover(function() { 
    $(this).find('img.zoom').show(); 
},function() { 
    $(this).find('img.zoom').hide(); 
}) 

Answer 3

取る：

$('ul li').hover(function() { 
    $(this).find('img.zoom').fadeIn(); 
},function() { 
    $(this).find('img.zoom').fadeOut(); 
});