最大高度更改時，偽類：hover仍然存在

Question

這在Firefox上不會發生，但在Chrome和IE上會發生。 我所擁有的是一個<input>元素，當您鍵入內容時會生成搜索建議。 在以下三種情況下會顯示建議：輸入處於活動狀態，鼠標懸停在輸入上方或鼠標懸停在搜索結果上。

搜索結果使用css-transitions進行隱藏/顯示，因此我通過將max-height設置為500px（比列表可能更大）和0來控制它。

單擊結果時出現問題。 我創建了一個click事件（使用jQuery ），以便在單擊結果之一時，將一個類添加到搜索結果中使其隱藏，並在轉換完成后刪除該類（此時應保留該類隱藏，因為您的鼠標不再懸停在上面。 在Chrome和IE中，如果您不移動鼠標，則刪除該類時，列表會再次增長。

有沒有辦法更新瀏覽器，以便:hover偽類消失？

這是一個修改后的演示，其工作方式幾乎相同： http : //jsfiddle.net/zZMcv/3/

Answer 1

您可以修改js代碼以顯示和隱藏列表，以避開：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);
}

或者，您可以簡單地修改.js-hide類，使其設置display：none;。 transition-duration：0;

或者，在良好的瀏覽器中，或者，您可以將輸入的列表屬性與datalist元素結合使用，以避免在執行gui建議時出現更多次要的麻煩。