호버 이벤트 jQuery에서 단 하나의 요소 표시

Question

팀 섹션을 만들고 있습니다. 간단한 <div>이 있는데 각 회원의 프로필 사진이 있으며 사진을 가져 가면 정보가 표시됩니다. jQuery의 .hover()으로 쉽게 만들었습니다. 그러나, 내가 똑같은 코드를 복사했을 때 그것이 무엇을했는지 짐작할 수 있습니다. 그래, 너희들 말이 맞아. 그것은 모든 팀 멤버들의 정보를 나에게 보여준다.

내가 원했던 것은 하나씩 차례로 표시하고 콘텐츠를 마우스로 가리키면 콘텐츠가 초기 상태로 돌아 가기 만하면됩니다.

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

편집, 추가 HTML :

나는 아래에 내 JS 코드를두고 사전에

<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

는 자바 스크립트 코드는 바로이 < 사업부 내에서 -all- 전체 문서의 요소 (아닌 사람을 숨 깁니다, 클래스 teamMemberPhoto 모든 요소를 ​​선택하고 그 위에 호버 기능을두고 있다는 것입니다 >)은 teamMemberCircle 클래스가 있고 teamMemberInfo 클래스의 모든 요소를 ​​보여줍니다.

해결 방법은 이벤트 핸들러 기능의 "현재"요소로 항상 정의되는 this 요소 내에서 검색하는 것입니다. 또한 DOM 트리를 변경하기 전에 페이지가로드되었는지 확인하려면 $(window).load(function(){ ... }); 안에 모든 것을 넣어야합니다. 여기

는 작업 버전 자바 스크립트입니다 :

<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가 변경됨에 따라 공식 페이지를 항상 살펴 봐야합니다. 예를 들어 예를 들어 예를 많이 사용하는 예가 많이 있기 때문입니다. 곧 문제를 야기 할 것입니다.

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>