한 항목에만 영향을 미치는 여러 요소를 가져가

Question

안녕 얘들 아 나는 나란히 배치되는 동일한 클래스 이름으로 몇 가지 요소를 가져갈 수있는 방법이 있는지 궁금 해서요 및 요소의 영역을 떠날 때 조치가 될 것입니다. 예를 들면 :

<div class="hoverme"></div> 
<div class="hoverme"></div> 
<div class="hoverme"></div> 
<div class="hoverme"></div> 
<div class="hoverme"></div> 

들은 "hoverme"클래스의 전체 영역을 떠날 때 아래에만 호출합니다 "unhover"의 자바 스크립트.

$('.hoverme').live('mouseover mouseout', function(event) { 
      if (event.type == 'mouseover') { 

       if(!$("#stage1 td").hasClass("hover")) 
       { 
        $("#stage1 td").addClass("hover",200) 
       } 
      } 
      else { 

       //$("#stage1 td").removeClass("hover",200) 

      } 
     }); 

이 동작을위한 방법이 있습니까 ??

편집 : div의 모양이 단순한 정사각형이 아닙니다. 그것은 몇 개의 사각형으로 이루어져 있지만 결국 모양이 다소 이상합니다. 그래서 나는 다른 div로 내 div를 감쌀 수 없었다. 내가 JQuery와 UI를 사용하고

그러므로 내가 addclass 두 번째 매개 변수

Answer 1

이전 답변이 혼합 된 것 같습니다.

• mouseover와 mouseout 대신 mouseenter와 mouseleave를 사용하십시오.

• 두 번째로, 수은 래퍼 div를 사용합니다. 이것이 내가 만든 방법입니다. 하위 div 위로 마우스를 가져 가면 해당 부모가 어디에 있든 관계없이 상위 항목 위로 마우스를 가져갑니다. 부모 div의 mouseleave 이벤트는 더 이상 자식 위로 마우스를 가져갈 때까지 트리거되지 않습니다.

나는 절대적으로 십자가 모양으로 위치 다섯 개 자식 된 div와 크기가 0 인 래퍼 사업부를 작성했는데, 나는 당신이 당신이 필요 말하는 방식으로 작동합니다 생각합니다. Firefox 및 Chrome에서 테스트되었습니다.

$('.hoverme-wrapper').on('mouseenter mouseleave', function(e) { 
    if (e.type === 'mouseenter') { 
    if(!$("#stage1 td").hasClass("hover")) 
     $("#stage1 td").addClass("hover", 200) 
    } else { 
    $("#stage1 td").removeClass("hover", 200); 
    } 

어디 #의 스테이지 1 TD는

Answer 2

이 시도에 removeclass 수 있어요 : live() 당신이 on() 방법을 사용할 수 있습니다되지 않습니다 :

$('.hoverme').on('mouseover', function(event) { 
    $("#stage1 td").addClass("hover") 
}).on('mouseout', function() { 
    $("#stage1 td").removeClass("hover") 
})   

http://jsfiddle.net/jUmTt/

Answer 3

할 일을 학생들이 hover 클래스를받는 요소 중 하나를 가리킬 때마다 의미합니까? : 즉,

var elements = $('.hoverme'); 
elements.on('hover', function(event) { 
    event.type == 'mouseover' ? elements.addClass('hover') : elements.removeClass('hover'); 
}); 

다른 방법으로, 마우스 오버 할 요소를 포장하기 위해 HTML을 재구성 할 수

<div class="hoverWrap"> 
    <div class="hoverme"></div> 
    <div class="hoverme"></div> 
    <div class="hoverme"></div> 
    <div class="hoverme"></div> 
    <div class="hoverme"></div> 
</div> 

을 그리고 hoverWrap에 호버 이벤트 리스너를 첨부 :이보십시오. 이것은 의미 론적으로 의미가 있습니다. 요소가 마크 업에서 서로 가깝다고해서 그것이 하나의 큰 요소로 취급되어야한다는 것을 의미하지는 않습니다.

Answer 4

는 나도 몰라,하지만 난 당신이이 일을하려는 생각 :

var timer; 
$('.hoverme').on('mouseenter mouseleave', function(e) { 
    if (e.type === 'mouseenter') { 
     clearTimeout(timer); 
     if(!$("#stage1 td").hasClass("hover")) { 
      $("#stage1 td").addClass("hover") 
     } 
    } else { 
     timer = setTimeout(function() { 
      $("#stage1 td").removeClass("hover"); 
     }, 300); 
    } 
}); 

Answer 5

사용 mouseleave 대신 mouseout.