Question

我正在创建一个团队部分。我有一个简单的＆lt; div＆gt;我有每个成员的个人资料照片，当我悬停照片时，它会显示信息。我使用jQuery＆＃39; .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>

提前致谢。

Answer 1

你的JavaScript代码会选择所有带有teamMemberPhoto类的元素并在其上放置一个悬浮函数，只是隐藏-all-元素（在整个文档中，而不仅仅是＆lt; div＆gt;中的那些元素）拥有类teamMemberCircle并显示类teamMemberInfo的所有元素。

解决方案是在this元素内进行搜索，该元素始终定义为＆＃34; current＆＃34;事件处理函数的元素。此外，在更改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（）采用的第二个参数（第一个：＆＃34; handlerIn＆＃34;，第二个是：＆＃34; handlerOut＆＃34;）。该处理程序将状态转换回原始状态。

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

注意：您可以在http://api.jquery.com/hover/找到.hover()的官方文档。随着API随着jQuery版本的不断变化而变化，你应该总是看看这个官方页面，因为在野外有很多旧例子使用例如已弃用的功能很快就会导致问题。

Answer 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>

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

2 个答案: