Mouseenter 在 2 张不同的图片上答案

【问题标题】：Mouseenter on 2 different picturesMouseenter 在 2 张不同的图片上
【发布时间】：2014-07-23 14:00:14
【问题描述】：

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

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

简而言之，我希望黑框只出现在我悬停的人身上。

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

现在的函数代码是：

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

.clickMe 的默认 CSS 为

       display:none

当我在 .Claus 上鼠标输入时，我可以看到 .clickMe 当然会触发淡入淡出，这也会在下面的人身上触发。（我有超过 20 个人需要处理，但我认为为这个案例制作 2 个就足够了）

有什么建议吗？

【问题讨论】：

标签： jquery hover mouseenter mouseleave

【解决方案1】：

试试这个代码：

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

【讨论】：

嗨@user3003216 - 这肯定会起作用，然后我可以在我拥有的每个人之间加上逗号。听起来很简单！我看到我得到了很多其他有趣的答案，所以我会投票给他们。谢谢大家！
查看我编辑的答案，您不需要指定人名..我误读了您的问题，我认为它只是 2 人.. ^^

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

我已将第二个人更改为“claus”类（我不明白为什么您要为每个人设置一个类..）

我还在claus mouse enter上添加了这个：

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

如果你想要一个“claus”和一个“david”，那么我想你可以做同样的事情，但对于 davids 鼠标输入？

【讨论】：

【解决方案4】：

如果您要为超过 1 或 2 人执行此操作，您应该创建一个可以重复使用的函数，我为您做了一个简单的示例，如下所示：

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

它会找到一个类为 hoverable 的元素，并尝试在 hoverable 元素的父元素内找到一个类为 clickMe 的元素。

现在您所要做的就是将hoverable 类添加到您希望效果出现的任何人。您的 jsFiddle 示例：

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

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

【讨论】：