如何使用 JQuery 选择当前悬停的项目？答案

【问题标题】：How do I use JQuery to select an item that is currently being hovered over?如何使用 JQuery 选择当前悬停的项目？
【发布时间】：2017-01-02 04:03:13
【问题描述】：

我使用的是 jQuery 1.12。我有以下课程，适用于鼠标悬停在它们上方的项目

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

我想用jQuery来选择当前有hover的项目（上面的类），所以我尝试了

elt = $('.select-options li:hover')

但这不起作用，至少，它不在我的 Fiddle 中——http://jsfiddle.net/cwzjL2uw/11/。打开“选择”下拉菜单之一，将鼠标悬停在其中一个项目上，然后按键盘上的任意键以激活我的选择器。选择器反复返回“未定义”。

【问题讨论】：

标签： jquery html css hover selector

【解决方案1】：

jQuery 对象没有 outerHTML 属性...底层 dom 元素有

尝试改变

$(window).keydown(function(event){
    elt = $('.select-options li:hover')
    console.log(elt.outerHTML); 
});

到

$(window).keydown(function(event){
    elt = $('.select-options li:hover')
    console.log(elt[0].outerHTML);    
});

您将需要添加额外的检查以查看 elt 是否实际上也有匹配项或会遇到错误

【讨论】：

【解决方案2】：

取决于你想要什么数据，但你记录的是错误的东西。

将您的 console.log 更改为：

console.log(elt[0].innerHTML);

您将获得所悬停的任何内容的文本数据。

【讨论】：