javascript - 将鼠标悬停在文本上以打开图像

Question

当我将鼠标悬停在“PIC”这个词上时，我想打开一张图片，但我在同一部分有 10 个或更多这个部分，并且每个部分都必须显示 PIC 元素的特定图像。

<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>

等等......

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

这个工作正常，但它打开所有图像而不是只打开我悬停的 PIC 的图像？任何帮助将不胜感激。非常感谢。

Answer 1

你应该使用 $(this) - 指的是当前元素 -和 next() - 当前元素之后的元素

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

您的选择器也有错字

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