Question

当我将鼠标悬停在单词“PIC”上时，我想打开一张图像，但是我在同一部分中有10个或更多这个＆amp;它们中的每一个都必须显示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>

ECT .....

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

这项工作正常，但它打开所有图像而不是只打开我徘徊的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

你应该使用$（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 _

Answer 3

恕我直言，使用$(this).next()方法有点不灵活;通过附加指向每个标题元素的目标pic的data-*属性，我会稍微改变它：

<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看起来像这样：

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

到底是什么，这是fiddle。

悬停在文本上打开图像

3 个答案: