마우스 센터의 공용 jquery

드롭 다운 하위 메뉴가있는 Nav가 있습니다. 드롭 다운 내가 메뉴의 조합을하고자 나타나면 + 같이 드롭 다운 : 마우스 센터의 공용 jquery

enter image description here

그래서 마우스가 종료하면 분홍색이 전체 블록은 다음 하위 탐색이 사라집니다. 현재 마우스가 드롭 다운 만 종료하면 드롭 다운이 사라집니다. this example을 보았지만 함께 수업을 결합하면 나에게 적합하지 않습니다.

여기 왜 단지 mouseenter 및 mouseleave 모두의 목표에서 서브 클래스를 제거하지 마십시오 MY FIDDLE

출처

2012-09-17 t q

Erm ... 정확히 지금 작동하지 않는 것은 무엇입니까? 나를 위해, 그것은 마우스가 'item0'과 'item1'영역을 떠날 때 모두 작동합니다. – raina77ow

'item 0' 위에 마우스를 놓으면 드롭 다운이 나타나고 드롭 다운 위로 마우스를 이동하면'item 0'으로 다시 돌아갑니다. 드롭 다운이 사라지지 않아야합니다. –

첫 번째 문제는 mouseOut 이벤트를 추적하는 것입니다. 콘솔에 마우스를 올리면 item0 쪽이 to 요소가 목록 항목이 아닌 본문으로 등록된다는 것입니다. div 같은 실제 블록 요소를 사용하는 대신 목록 항목을 블록으로 만드는 문제가있을 수 있습니다. – invertedSpear

입니까? this 같은

var animate; 
$(".myClass").mouseenter(function() { 
    clearTimeout(animate); 
    $('.myClass').css('background-color','#777'); 
    $('.mySubClass').css('display','inline'); 
}); 
$(".myClass").mouseleave(function() { 
    animate = setTimeout(function(){ 
    $('.myClass .mySubClass').css('display','none'); 
    $('.myClass').css('background-color','#49616a'); 
    }, 800); 
});

... .myClass 같은 커버 에리어 메뉴 드롭의 조합은 이미 (해당 요소는 링크 및 드롭 다운 메뉴를 모두 포함하기 때문에).

여기에 또 다른 잠재적 인 버그가 수정되었습니다 : mouseleave-mouseenter 이벤트를 너무 빠르게 시퀀스 할 수 있습니다. 그래야만 커서가 메뉴 영역에 남아 있기 때문에 시간 초과 기능이 실행되지 않습니다. 이를 방지하기 위해 추가 변수 (animate)가 추가되었습니다. 그것은 mouseleave 핸들러에 타임 아웃을 저장하고 그것을`mouseenter '핸들러에서 지 웁니다.

출처

2012-09-18 00:19:35 raina77ow

나는'.myClass' 커버 영역이 이미 메뉴와 드롭의 결합이라는 것을 깨닫지 못했습니다. –

마우스 센터의 공용 jquery

답변

관련 문제