懸停在文字上打開圖片

Question

我想打開圖片時，我將鼠標懸停在單詞「PIC」上，但我對同一部分有10個或更多的這個&，他們每個人都必須顯示特定圖片的元素圖片。

<h6 id="pic1" class="pic"> PIC</h6> 
<div id="img_pic1" class="imgpic" style="display:none"><imgsrc="img/image1.jpg"/></div> 

<h6 id="pic2" class="pic"> PIC</h6> 
<div id="img_pic2" class="imgpic" style="display:none"><img src="img/image2.jpg"/>/div> 

<h6 id="pic3" class="pic"> PIC</h6> 
<div id="img_pic3" class="imgpic" style="display:none"><img src="img/image3.jpg"/>/div> 

ECT .....

<script> 
$('h6.pic').mouseenter(function(){ 
$('div.img_pic').fadeIn(); 
}).mouseleave(function(){ 
$('div.img_pic').fadeOut(); 
}); 
</script> 

Thhis做工精細，但它打開所有的圖像，而不是打開我的徘徊PIC的唯一形象？ 任何幫助將不勝感激。非常感謝你。

Answer 1

試試這個

<script> 
    $('h6.pic').mouseenter(function(){ 
    $(this).next().fadeIn(); 
     }).mouseleave(function(){ 
    $(this).next().fadeOut(); 
    }); 
</script> 

入住這FIDDLE

而且你不關閉你DIV正確

<img src="img/image2.jpg"/>/div> 

更新的代碼

UPDATED FIDDLE

如果是這樣的話，那麼你可以試試這個

$('h6.pic').mouseenter(function() { 
     console.log($(this).next('div')) 
     $(this).next().next('.imgpic').fadeIn(); 
    }).mouseleave(function() { 
     $(this).next().next('.imgpic').fadeOut(); 
    });​ 

// OR

$('h6.pic').mouseenter(function() { 
      console.log($(this).next('div')) 
      $(this).next().next().fadeIn(); 
     }).mouseleave(function() { 
      $(this).next().next().fadeOut(); 
     });​ 

Answer 2

你應該使用$（本） - 指的是當前元素 - 和next() - 元素右在當前元素之後

$('h6.pic').mouseenter(function(){ 
    $(this).next('div.imgpic').fadeIn(); 
}).mouseleave(function(){ 
    $(this).next('div.imgpic').fadeOut(); 
}); 

您還有一個錯字lector

$('div.img_pic') // <-- your class is imgpic without the _ 

Answer 3

恕我直言，使用$(this).next()的方法有點不靈活;我想接近它略有不同的附加屬性data-*指向每個標題元素的目標PIC：

<h6 id="pic1" class="pic" data-target="img_pic1"> PIC</h6> 
<div id="img_pic1" class="imgpic" style="display:none"><img src="img/image1.jpg"/></div> 

<h6 id="pic2" class="pic" data-target="img_pic2"> PIC</h6> 
<div id="img_pic2" class="imgpic" style="display:none"><img src="img/image2.jpg"/></div> 

<h6 id="pic3" class="pic" data-target="img_pic3"> PIC</h6> 
<div id="img_pic3" class="imgpic" style="display:none"><img src="img/image3.jpg"/></div>​ 

然後你jQuery'd是這樣的：

$('h6.pic').each(function() { 
    var target = $(this).data('target'); 
    $(this).mouseenter(function() { 
    $('#' + target).fadeIn(); 
    }).mouseleave(function() { 
    $('#' + target).fadeOut(); 
    });   
});​ 

什麼嘿，這是fiddle。