在悬停事件jQuery上仅显示一个元素

我正在创建一个团队部分。我有一个简单的方法，在那里我有每个成员的个人资料照片，当我悬停在照片上时，它会向您显示信息。 我使用jQuery的

.hover（）

轻松实现了这一点。但是，当我复制相同的代码时，猜猜它做了什么。是的，你们说得对：它向我展示了所有团队成员的信息

我想要的只是一个接一个地显示它们，当您停止悬停内容以返回其初始状态时

我在下面留下我的JS代码：

<script type="text/javascript">
    $('.teamMemberPhoto').hover(function(){
        $('.teamMemberCircle').hide();
        $('.teamMemberInfo').show();
    });
</script>

$（'.teamMemberPhoto'）。悬停（函数（）{
$（'.teamMemberCircle'）.hide（）；
$（'.teamMemberInfo'）.show（）；
});

编辑，添加HTML:

<div class="teamMembersContainer">

                        <div class="teamMember">
                            <h3 class="teamMemberName">Sarei Arlin Rodriguez Camarillo</h3>
                            <p class="teamMemberPosition">Software Developer</p>

                            <div class="teamMemberBox">

                                <div class="teamMemberCircle" style="background: #52b3d9;">

                                    <img class="teamMemberPhoto" src="../img/team/1.png" alt="Member" >

                                </div>

                                <div class="teamMemberInfo">

                                    <h4 class="teamWhat">What I do in my job?</h4>
                                    <p class="teamInfoContent">Software Development</p>

                                    <h4 class="teamWhat"> Why I do what I do ?</h4>
                                    <p class="teamInfoContent">Currently, I work in software development which is one of the most fulfilling things I have done and it has given me great personal and professional satisfaction.</p>

                                    <h4 class="teamWhat">What I do for fun?</h4>
                                    <p class="teamInfoContent">I have a great passion for the world of technology and telecommunications and love discovering and learning new about that realm.</p>


                                </div>

                            </div>

                            </div>

                        </div>
               </div>

萨雷·阿林·罗德里格斯·卡马里洛
软件开发人员

我的工作是什么？
软件开发

我为什么要这么做？
目前，我从事软件开发工作，这是我所做过的最有成就感的事情之一，它给了我极大的个人和职业满意度
我做什么是为了好玩？
我对科技和电信领域充满激情，喜欢探索和学习该领域的新知识

---

提前感谢。

显示html，以便我可以更精确地帮助您

也许下面的脚本解决了你的问题，或者让你知道应该做什么

<script type="text/javascript">
    $(document).ready(function(){
        $('.teamMemberPhoto').mouseover(function(){
            $(this).find('.teamMemberCircle').hide();
            $(this).find('.teamMemberInfo').show();
        }
        $('.teamMemberPhoto').mouseleave(function(){
            $(this).find('.teamMemberCircle').show();
            $(this).find('.teamMemberInfo').hide();
        }
    });
</script>

$（文档）.ready（函数（）{
$（'.teamMemberPhoto'）.mouseover（函数（）{
$（this.find（'.teamMemberCircle'）.hide（）；
$（this.find（'.teamMemberInfo'）.show（）；
}
$（'.teamMemberPhoto'）.mouseleave（函数（）{
$（this.find（'.teamMemberCircle'）.show（）；
$（this.find（'.teamMemberInfo'）.hide（）；
}
});

所发生的事情是，您的JavaScript代码选择了teamMemberPhoto类的所有元素，并在其上放置了一个悬停函数，它只是隐藏了包含teamMemberCircle类的-all-元素（在整个文档中，而不仅仅是中的元素），并显示了包含teamMemberInfo类的所有元素

解决方案是在

这个
元素中搜索，该元素总是被定义为事件处理程序函数的“当前”元素。此外，在更改DOM树之前，您需要将所有内容都放在
$（窗口）中。load（function（）{…}）；
以确保页面已加载

以下是JavaScript的工作版本：

<script type="text/javascript">
$(window).load(function(){
      $('.teamMemberBox').hover(
        function(){
          $('.teamMemberCircle', this).hide();
          $('.teamMemberInfo', this).show();
        },
        function(){
          $('.teamMemberCircle', this).show();
          $('.teamMemberInfo', this).hide();
        }
      );
});
</script>


$（窗口）。加载（函数（）{
$（'.teamMemberBox'）。悬停(
函数（）{
$（'.teamMemberCircle'，this.hide（）；
$（'.teamMemberInfo'，this.show（）；
},
函数（）{
$（'.teamMemberCircle'，this.show（）；
$（'.teamMemberInfo'，this.hide（）；
}
);
});

您还希望代码让状态返回到初始状态。因此，我添加了.hover（）接受的第二个参数（第一个参数：“handlerIn”，第二个参数是：“handlerOut”）。此处理程序将状态翻转回原始状态

示例代码的工作版本可在以下位置找到：

注意：您可以找到
.hover（）的官方文档
at。随着API随着jQuery版本的不断增加而变化，您应该始终查看此官方页面，因为在野外有很多旧的示例使用不推荐的函数，这些函数很快就会导致问题。
请共享HTML标记…解决方案取决于您的HTML结构。此外，除非您有理由另外，我建议使用CSS。我添加了HTML，希望这有帮助，谢谢。它不显示内容，我在那里放了一些console.log，它调用事件，但不显示内容。是的，这是正确的。原因是，我在写这个答案时没有你的HTML。你的HTML结构与代码元素不匹配对于teamMemberCircle/teamMemberInfo，没有“this”的子项事件分配到的元素。我目前正在调查您的HTML以解决此问题，然后将发布一个更好的解决方案。非常感谢您的时间。不客气！我编辑了我的帖子。请告诉我新代码是否正常工作……不幸的是，我无法测试它。热工uet:（我制作了一个JSFIDLE，老实说，我不知道错误在哪里