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;
    }    
 });

但$（下一个）.trigger（'mouseenter'）;似乎不起作用。你可以在这里查看我的小提琴 - http://jsfiddle.net/cwzjL2uw/15/。单击“选择状态”下拉列表，然后单击键盘上的向下键以触发上面的代码块。

Answer 1

每MDN：

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

因此，它不一定是应用于元素的类，也是：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/

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

1 个答案: