Отображение только одного элемента при наведении jQuery

Я создаю раздел команды. У меня есть простой ‹div›, где у меня есть фотографии профиля каждого участника, и когда я навожу курсор на фотографию, она показывает вам информацию. Я сделал это легко с помощью 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>

Заранее спасибо.


jquery hover jquery-hover
person Alex    schedule 14.10.2014    source источник
comment
Поделитесь, пожалуйста, HTML-разметкой...   -  person LcSalazar    schedule 14.10.2014
comment
Решение зависит от вашей структуры HTML. Кроме того, если у вас нет причин не делать этого, я предлагаю использовать для этого CSS.   -  person showdev    schedule 14.10.2014
comment
Я добавил HTML, надеюсь, это поможет, спасибо.   -  person Alex    schedule 15.10.2014

Ответы (2)


arrow_upward
1
arrow_downward

Что происходит, так это то, что ваш код JavaScript выбирает все элементы с классом teamMemberPhoto и помещает на них функцию наведения, которая просто скрывает -все-элементы (во всем документе, а не только те, что внутри ‹div›), которые имеют класс teamMemberCircle и показывает все элементы с классом teamMemberInfo.

Решение состоит в поиске в элементе this, который всегда определяется как «текущий» элемент для функций обработчика событий. Также вам нужно поместить все в $(window).load(function(){ ... });, чтобы убедиться, что страница загружена, прежде чем изменять дерево DOM.

Вот рабочая версия 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.

Примечание. Официальную документацию по .hover() можно найти по адресу http://api.jquery.com/hover/. Поскольку API меняется с увеличением версии jQuery, вам всегда следует заглядывать на эту официальную страницу, потому что в дикой природе есть много старых примеров, которые используют, например. устаревшие функции, которые вскоре вызовут проблемы.

person SDwarfs    schedule 14.10.2014
comment
Он не показывает содержимое, я поместил туда файл console.log, и он вызывает событие, но не показывает содержимое. - person Alex; 15.10.2014
comment
Да, это правильно. Причина в том, что при написании этого ответа у меня не было вашего HTML. Ваша структура HTML не соответствует коду, так как элементы с teamMemberCircle / teamMemberInfo не являются дочерними элементами этого элемента, которому было назначено событие. В настоящее время я изучаю ваш HTML, чтобы решить эту проблему, а затем опубликую лучшее решение. - person SDwarfs; 15.10.2014
comment
Большое вам спасибо за ваше время. - person Alex; 15.10.2014
comment
Пожалуйста! Я отредактировал свой пост. Дайте мне знать, работает ли новый код... К сожалению, я не смог его протестировать. - person SDwarfs; 15.10.2014
comment
Горячий рабочий уэт :( Честно говоря, я сделал JSFiddle, я не знаю, где ошибка jsfiddle.net/jkt4b68v - person Alex; 15.10.2014
comment
jsfiddle.net/jkt4b68v/1 ‹ - заработало. Ваш CSS был немного особенным. Поэтому мне пришлось вставлять каждую часть CSS одну за другой и смотреть, что она на самом деле делает. Теперь обновлю свой ответ соответственно... - person SDwarfs; 15.10.2014

arrow_upward
0
arrow_downward

Покажите 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>
person Dexxtz    schedule 14.10.2014