js의 호버 기능이 넘침

Question

사용자가 이미지를 가리키면 텍스트가 나타나고 거품이 생기도록 페이지를 설정했습니다. 물고기의 11 개의 심상이 있고 각자에는 그것의 자신의 원본 및 거품이있다. 나는 물고기를 포함하고있는 div에 중복이 없다는 것을 확인했다. 그러나 특정 이미지 위에 마우스를 올리면 다른 이미지의 일부 텍스트도 표시된다. 이것은 사용자가 한 번에 하나의 텍스트를보고 싶어하기 때문에 너무 산만합니다. 이 문제를 어떻게 해결할 수 있습니까? 다음은이 페이지로 연결되는 링크입니다. http://arabic001.com/colors

Answer 1

일반적인 해결책이 무엇인지 궁금합니다. 이 상황에서 나는 jquery 용 hoverIntent 플러그인을 사용합니다.

이 길을 가면, 다음 각 .mouseOver(),.mouseOut() 변경됩니다 :이

$('#fishBlue').hoverIntent(function() { 
       $('#bubblesBlue').toggle('slow'); 
       $('#textBlue').toggle('slow'); 
      }); 
}, function() { 
       $('#bubblesBlue').hide('slow'); 
       $('#textBlue').toggle('slow') 
}); 

참고

이이

  $('#fishBlue').mouseover(function() {  
       $('#bubblesBlue').toggle('slow'); 
       $('#textBlue').toggle('slow'); 
      }); 

      $('#fishBlue').mouseout(function() {     
       $('#bubblesBlue').hide('slow'); 
       $('#textBlue').toggle('slow'); 
      }); 

에서

을 호버성 plu 진은 적어도 JQuery와에게 필요 1.5.1

다른 팁

나는 것 추상적 인 것들을 조금 더, 왜 각 물고기 같은 일을 다시 작성합니다.

아마도 내 인덱스 파일 보았다 클래스

$('.fish').hoverIntent(function() { 
       $(this).next('.bubble').toggle('slow'); 
       $(this).next('.text').toggle('slow'); 
      }); 
}, function() { 
       $(this).next('.bubble').hide('slow'); 
       $(this).next('.text').toggle('slow') 
});