요소에 호버 클래스를 적용하려면 어떻게해야합니까?

Question

jQuery 1.12를 사용하고 있습니다. 나는 누군가가

.select-options li:hover { 
    color: gray; 
    background: #fff; 
} 

어떻게 내가 LI 요소에이 클래스를 적용 트리거하기 위해 jQuery를 사용합니까 LI 요소를 가리킬 때이 클래스가? 나는 이것을 시도했다

$(".select").bind('keydown', function(event) { 
    elt = $(this).find('.select-options li:hover') 
    if (elt.length == 0) { 
     elt = $(this).find('.select-options li:first') 
    }  // if 
    var next; 
    switch(event.keyCode){ 
    // case up 
    case 38:   
     break; 
    case 40: 
     next = $(elt).next(); 
     console.log($(next).text()); 
      $(next).trigger('mouseenter'); 
     break; 
    }  
}); 

그러나 $ (다음) .trigger ('mouseenter'); 작동하지 않는 것 같습니다. 내 피들을 여기서 확인할 수 있습니다 - http://jsfiddle.net/cwzjL2uw/15/. "상태 선택"드롭 다운을 클릭하고 위의 코드 블록을 트리거하려면 키보드의 아래쪽 키를 클릭하십시오. MDN 당

Answer 1

:

CSS 의사 클래스는 요소의 특별한 상태를 선택할 수 지정 선택기에 추가 키워드입니다.

따라서 반드시 요소에 적용되는 클래스 일 필요는 없으며 가리키는 장치 상호 작용 (예 : 마우스)의 컨텍스트에서 호버가 사용됩니다.

귀하의 경우에는이 당신에게 출발점 제공한다 : JQuery와의 hover 이벤트로 리 요소 바인딩

:)

$(".select-options li") 
.hover(
function(e) { 
    $(this).addClass("selected"); 
}, 
function(e) { 
    $(this).closest(".select-options").find("li.selected").removeClass("selected"); 
} 
); 

$(".select").bind('keydown', function(event) { 
var currentElement = $(this).find(".select-options li.selected"); 
if (currentElement.length == 0) { 
    currentElement = $(this).find(".select-options li")[0]; 
    $(currentElement).addClass("selected"); 
    return; 
}  // if 
var nextElement; 
switch(event.keyCode){ 
// case up 
case 38: 
    nextElement = $(this).find(".select-options li")[($(this).find(".select-options li").index(currentElement) - 1) % $(this).find(".select-options li").length]; 
    break; 
case 40: 
    nextElement = $(this).find(".select-options li")[($(this).find(".select-options li").index(currentElement) + 1) % $(this).find(".select-options li").length]; 
    break; 
} 
if(currentElement !== null) { 
    $(currentElement).removeClass("selected"); 
} 
if(nextElement !== null) { 
    $(nextElement).addClass("selected"); 
} 

을};

는 CSS를

.select-options li.selected { 
    color: gray; 
    background: #fff; 
} 

이 작업 바이올린입니다을 조정하는 것이 필요합니다. [JS와 트리거 CSS 호버]의

http://jsfiddle.net/sge8g5qu/