悬停在文字上打开图片

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。