如何将悬停类应用于我的元素？

Question

我使用的是 jQuery 1.12。当有人将鼠标悬停在 LI 元素上时，我有这个类

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

如何使用 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;
    }    
 });

但是 $(next).trigger('mouseenter');似乎没有工作。你可以在这里查看我的小提琴——http://jsfiddle.net/cwzjL2uw/15/。单击“选择状态”下拉菜单，然后单击键盘上的向下键以触发上面的代码块。

Answer 1

每MDN:

CSS 伪类是添加到选择器的关键字，用于指定 要选择的元素的特殊状态。

因此它不一定是应用于元素的类， :hover 也用于指点设备交互（例如鼠标）的上下文中。

在你的情况下，这应该给你一个起点：

将你的 li 元素绑定到 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;
}

这是一个有效的小提琴。

http://jsfiddle.net/sge8g5qu/