在悬停事件jQuery上只显示一个元素答案

【问题标题】：Showing just one element on hover event jQuery在悬停事件jQuery上只显示一个元素
【发布时间】：2014-10-14 19:37:23
【问题描述】：

我正在创建一个团队部分。我有一个简单的

，其中有每个成员的个人资料照片，当我将照片悬停时，它会向您显示信息。我使用 jQuery 的.hover() 轻松实现了这一点。但是，当我复制相同的代码时，猜猜它做了什么。是的，你们是对的：它向我展示了所有团队成员的信息。

我想要的只是一个一个地显示它们，当你停止悬停内容时返回到它们的初始状态。

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

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

编辑，添加 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 标记...
解决方案取决于您的 HTML 结构。另外，除非你有理由不这样做，否则我建议使用 CSS。
我已添加 HTML，希望对您有所帮助，谢谢。

标签： jquery hover jquery-hover

【解决方案1】：

发生的情况是您的 JavaScript 代码选择了所有具有类 teamMemberPhoto 的元素并在其上放置了一个悬停功能，它只是隐藏了所有元素（在整个文档中，而不仅仅是在

中的元素）类 teamMemberCircle 并显示所有具有类 teamMemberInfo 的元素。

一种解决方案是在this 元素内进行搜索，该元素始终被定义为事件处理函数的“当前”元素。此外，在更改 DOM 树之前，您需要将所有内容放在 $(window).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>

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

可以在以下位置找到示例代码的工作版本：http://jsfiddle.net/jkt4b68v/1

注意：你可以在http://api.jquery.com/hover/找到.hover()的官方文档。随着 jQuery 版本的不断增加，API 也发生了变化，你应该经常看看这个官方页面，因为在野外有很多旧的例子使用例如很快就会导致问题的弃用函数。

【讨论】：

它不显示内容，我在里面放了一些console.log，它调用了事件但它不显示内容。
是的，没错。原因是，我在写这个答案时没有你的 HTML。您的 HTML 结构与代码不匹配，因为带有 teamMemberCircle / teamMemberInfo 的元素不是事件分配到的“this”元素的子元素。我目前正在调查您的 HTML 以解决此问题，然后会发布更好的解决方案。
非常感谢您的宝贵时间。
不客气！我编辑了我的帖子。让我知道新代码是否有效……不幸的是，我无法对其进行测试。
Hot working uet :( 我做了一个 JSFiddle 老实说我不知道错误在哪里jsfiddle.net/jkt4b68v

【解决方案2】：

显示 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>

【讨论】：