0

这不会发生在 Firefox 上，但会发生在 Chrome 和 IE 上。我所拥有的是一个<input>在您键入时生成搜索建议的元素。建议在三种情况下显示，当输入处于活动状态时，当您的鼠标悬停在输入上时，或者当您的鼠标悬停在搜索结果上时。

搜索结果使用 css-transitions 隐藏/显示，因此我将max-height其设置为 500px（比列表可能更大）和 0 来控制它。

单击结果时会出现问题。我创建了一个click事件（使用jQuery），以便当您单击其中一个结果时，会在搜索结果中添加一个类以使其隐藏，并在转换完成后删除该类（此时它应该保持隐藏，因为你的鼠标不再悬停在它上面）。在 Chrome 和 IE 中，如果您不移动鼠标，则在删除该类时列表会再次增长。

有没有办法更新浏览:hover器使伪类消失？

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

4

1 回答 1

0

您可以修改 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 属性与 datalist 元素一起使用，以避免在执行 gui 建议时出现更多的小问题......

于 2013-06-14T20:29:19.023 回答