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

Question

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

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

如何使用 jQuery 触发将此 class 应用于 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');似乎没有用。你可以在这里查看我的 Fiddle — http://jsfiddle.net/cwzjL2uw/15/ 。单击“select State”下拉菜单，然后单击键盘上的向下键以触发上面的代码块。

Answer 1

根据 MDN:

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected.

因此它不一定是应用于元素的 class，并且 :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;
}

这是一个有效的 fiddle。

http://jsfiddle.net/sge8g5qu/

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

How do I apply a hover class to my element?

css

jquery

hover

mouseenter