Question

对于我的问题，我向你提供了我创造的这个小提琴： http://jsfiddle.net/6x96w/

如果你将鼠标悬停在第一个人身上，你可以看到一个黑匣子盘旋在这个人身上，但黑匣子也会盘旋在下面的人身上。我试图让黑盒子只出现在第一个人身上，当我将鼠标移到它上面时它会消失。然后，当我在2号人物上盘旋时，黑匣子应该只悬停在那个人身上。

所以简而言之，我希望黑盒子只出现在我正在盘旋的人身上。

如果没有为每个人创建不同类别的超长代码，这是否可行？

现在的功能代码是：

        $('.Claus').mouseenter(function(){
        $('.clickMe').fadeIn(500);      
        });
        $('.clickMe').mouseleave(function(){
        $(this).fadeOut(500);
        });

.clickMe的默认CSS为

       display:none

我可以看到.clickMe当然会触发fadeIn，当我鼠标进入.Claus时，也会触发下面的人。（我有20多个人需要这个，但是我觉得为这个案子做2就足够了）

有什么建议吗？

Answer 1

试试这段代码：

$('img').not('.clickMe').mouseenter(function () {
            $(this).prev('.clickMe').fadeIn(500);       
});
 $('.clickMe').mouseleave(function(){
            $(this).fadeOut(500);
});

Answer 2

如果你要为超过1或2个人做这个，你应该做一个可以重复使用的功能，我已经为你做了一个简单的例子如下：

$('.hoverable').mouseenter(function () {
    $(this).parent().find('.clickMe').fadeIn(500);
});

它找到一个包含类hoverable的元素，并尝试在clickMe元素的父元素中找到类hoverable的元素。

现在，您所要做的就是将hoverable课程添加到您想要效果的人身上。你的jsFiddle示例：

<img src="http://www.clipartbest.com/cliparts/dir/La9/dirLa9ri9.jpeg" class="Claus hoverable" />

如果你正在寻找像这里一样的独特性，建议使用id而不是类。

Answer 3

你需要一个带图片的所有元素的通用监听器

$('img').not('.clickMe').mouseenter(function () {
    $(this).siblings('.clickMe').fadeIn(500);
});
$('.clickMe').mouseleave(function () {
    $(this).fadeOut(500);
});

http://jsfiddle.net/robschmuecker/6x96w/2/

Answer 4

如果我理解正确，这就是你想要的：fiddle

我已将第二人改为班级“克劳斯”（我不明白为什么你会为每个人开一堂课......）

我还在克劳斯鼠标输入上添加了这个：

$(this).prev().fadeIn(500);

如果你想要一个“克劳斯”和一个“大卫”那么我想你可以做同样的事情，但大卫鼠标输入？

Mouseenter在2张不同的图片上

4 个答案: