jQuery에서이 CSS 형제 선택기를 복제하는 방법은 무엇입니까?

Question

본질적으로 나는 li:hover+li을 복제하고 싶지만 그보다 조금 더 복잡합니다. 나는 CSS 전환을 가지고 놀고 있으며 닫기에 지연이있는 드롭 다운 메뉴를 만들기 위해 노력하고있다. 즉, 메뉴에서 마우스를 움직이면 즉각 사라지지 않습니다.

정상적으로 작동하지만 정상 메뉴 항목에서 다음 메뉴 항목으로 이동할 때 이전 메뉴는 잠시 동안 열립니다. Here is a simplified example 드롭 다운을 사용하지 않고 최상위 항목을 전환합니다. 관련 CSS :

.menu > li { 
    background-color: #4F57AA; 
    /* transition out */ 
    -webkit-transition: background-color .2s ease-in-out 1s; 
} 
.menu > li:hover { 
    background-color: #8F002E; 
    /* transition in */ 
    -webkit-transition: background-color .2s ease-in-out; 
} 
.menu > li:hover+li { 
    -webkit-transition: background-color .2s ease-in-out; 
} 

메뉴를 완전히 벗어나면 목록 항목이 잠시 후에 파란색으로 되돌아갑니다. 그러나 "One"에서 "Two"로 이동하면 "One"의 호버 상태도 잠시 기다립니다.

형제 선택기를 사용하여 오른쪽에서 왼쪽으로 이동할 때 즉각적인 전환을 얻을 수있었습니다. 물론 "이전 형제"셀렉터가 없으므로 다른 방법으로는 작동하지 않습니다. 작은 전환점을 사용하여 jQuery를 사용하고 싶지만 이것이 내가 갇혀있는 부분입니다. 시도 :

$('.menu > li').hover(
    function() { 
    // instant transition for siblings? 
    $(this).siblings().css('-webkit-transition', 'background-color .2s ease-in-out'); 
    }, 
    function() { 
    // revert to regular transition? 
    $(this).siblings().css('-webkit-transition', 'background-color .2s ease-in-out 1s'); 
    } 
); 

하지만 작동하지 않습니다. 어떤 아이디어?

Answer 1

get what you want with pure CSS 수 있다고 생각합니다. 나는 (형제 자매를 사용하여) 마지막 선택을 제거하고 # 2 캐스케이드 위치로 밀려와 .menu:hover 첫째을 찾기 위해 선택을 변경했습니다 :

또한

.menu > li { 
    background-color: #4F57AA; 
    /* transition out */ 
    -webkit-transition: background-color .2s ease-in-out 1s; 
} 

.menu:hover > li { 
    -webkit-transition: background-color .2s ease-in-out .2s; 
} 

.menu > li:hover { 
    background-color: #8F002E; 
    /* transition in */ 
    -webkit-transition: background-color .2s ease-in-out; 
}