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;过渡持续时间：0;

或者，除了好的浏览器之外，你可以在输入中使用list attrib和datalist元素来避免在做gui建议时出现更多的小问题......

伪类：当Max-Height改变时，悬停仍然存在

1 个答案: