Pseudo-Class :hover persists when Max-Height changes

Question

This doesn't happen on Firefox, but it happens on Chrome and IE. What I have is an <input> element that generates search suggestions as you type. The suggestions show up in three cases, when the input is active, when your mouse is hovering over the input, or when your mouse is hovering over the search results.

The search results use css-transitions to hide/appear, so I control it with max-height being set to 500px (bigger than the list could ever be) and 0.

The problem comes when you click a result. I've created a click event (using jQuery) so that when you click one of the results, a class is added to the search results to make it hide, and it removes the class after the transition finishes (at this point it should stay hidden because your mouse isn't hovering over it anymore). In Chrome and IE, the list grows again when that class is removed, if you don't move your mouse.

Is there a way to update the browser so the :hover pseudo-class goes away?

Here's a modified demo that works nearly the same way: http://jsfiddle.net/zZMcv/3/

Answer 1

you can modify the js code to show and hide the list so as to dodge the :hover

function addResults() {
    $(this).parents('.input-field-label-set-2-column').next().empty().append($('<b>').text($(this).text()));
    var v = $(this).parent();
    pendSearch.call(v.prev().val(this.innerHTML)[0]);
    v.addClass("js-hide");

    v.hide(); 
    setTimeout(function(){v.show();},120);

    setTimeout(function () { v.removeClass("js-hide"); }, 350);
}

or, you can likely simply modify the .js-hide class so that it sets display:none; transition-duration:0;

or, an aside, in good browsers, you can use the list attrib on an input in conjunction with a datalist element to avoid this any many more minor snags when doing gui suggestions...