jQuery autocomplete rows highlight on select

Viewed 29969

I'm using jQuery UI Autocomplete.

When the suggestion box appears and the user presses the Down key (or they move the mouse over one suggestion), I need the entire row to be highlighted. So far, when pressing the Down key, only the background of the hyperlink gets highlighted. I tried styling the ui-state-hover class, but that's only used on the anchor element. I can't figure out how to highlight the li element.

Here's my CSS so far:

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

EDIT: To make it a bit more clear, the autocomplete generates its elements like so:

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

when the down key is pressed, the anchor element automatically gets the class ui-state-hover.

3 Answers
Related