Показывать только один элемент при наведении события jQuery

Question

Я создаю раздел команды. У меня есть простой <div>, где у меня есть фотографии профиля каждого участника, и когда я нахожу фотографию, она показывает вам информацию. Я сделал это легко с jQuery's .hover(). Но когда я скопировал тот же код, угадайте, что он сделал. Да, вы, ребята, правы: это показывает мне информацию от всех членов команды.

Я хочу просто просто отображать их по одному и когда вы перестаете зависать содержимое, чтобы вернуться в исходное состояние.

Я оставляю JS код ниже:

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

Edit, Добавлено 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 и ставит функцию парения на нем, что просто скрывает -все- элементы (во всем документе, а не только те, в пределах <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, вы всегда должны смотреть на эту официальную страницу, потому что в дикой природе есть много старых примеров, которые используют, например. устаревшие функции, которые вскоре вызовут проблемы.

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>