Question

I’m using jQuery autocomplete which makes a UL with items like:

<li class="ui-menu-item" role="menuitem">
   <a class="ui-corner-all" tabindex="-1">
     <img src="/thumb/x.jpg">
     <span class="text">Mr Armstrong</span>
   </a>
</li>

The problem here is when you hover or select an item, the ui-state-active style is being applied to A when I want to applied to LI… Anyone else run into this? How can I have a class added to the LI on hover/active?

Thanks

Answer 1

You could give the <a> a display: block so that it would take up the entire <li>, then it wouldn’t matter (visually) where the :hover pseudo-class was:

/* Make this as specific as needed. */
li.ui-menu-item a {
    display: block;
}

CSS Demo: http://jsfiddle.net/ambiguous/wZgLa/