jQuery 自动完成行在选择时突出显示

Question

我正在使用 jQuery UI 自动完成。

当建议框出现并且用户按下向下键（或者将鼠标移到一个建议上）时，我需要突出显示整行。到目前为止，当按下向下键时，只有超链接的背景会突出显示。我尝试设计 ui-state-hover 类的样式，但这仅用于锚元素。我不知道如何突出显示 li 元素。

到目前为止，这是我的 CSS：

.ui-state-hover, .ui-autocomplete li:hover
{
    color:White;
    background:#96B202;
    outline:none;
}

编辑： 为了更清楚一点，自动完成功能会像这样生成其元素：

<ul>
<li><a>an element</a></li>
<li><a>another element</a></li>
</ul>

当按下向下键时，锚元素会自动获取类 ui-state-hover。

Answer 1

我遇到了完全相同的问题，通过以下方式解决了它：

.ui-state-focus
{
    color:White;
    background:#96B202;
    outline:none;
}

Answer 2

作为 CSS 的初学者，我之前没有看到这一点：我只需要设置锚元素的样式 display:block 即可。万一有人再次遇到这种情况。

Answer 3

您可以使用事件：

yourElement.autocomplete({
        focus: function(event, ui) { console.log(var li = $(event.srcElement).parent()); },
});

li 变量就是您所需要的。您可以按照自己喜欢的方式更改样式或添加类别。