1

当我将鼠标悬停在“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>

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

4

3 回答 3

1

尝试这个

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

检查这个小提琴

你也没有正确关闭你的 div

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

更新代码

更新的小提琴

如果是这种情况，那么你可以试试这个

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

// 或者

$('h6.pic').mouseenter(function() {
            console.log($(this).next('div'))
            $(this).next().next().fadeIn();
        }).mouseleave(function() {
            $(this).next().next().fadeOut();
        });​
于 2012-09-21T22:03:01.963 回答
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 _
于 2012-09-21T22:03:10.263 回答
0

恕我直言，使用这种$(this).next()方法有点不灵活；我会通过附加一个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();
  });         
});​

什么鬼，这是小提琴。​</p>

于 2012-09-21T22:56:48.233 回答