这不会发生在Firefox上,但它发生在Chrome和IE上。我所拥有的是<input>
元素,可在您键入时生成搜索建议。建议显示在三种情况下,输入处于活动状态,鼠标悬停在输入上,或鼠标悬停在搜索结果上时。
搜索结果使用css-transitions来隐藏/显示,所以我控制它,max-height
被设置为500px(比列表可能更大)和0。
单击结果时出现问题。我创建了一个click
事件(使用jQuery
),这样当您点击其中一个结果时,会将一个类添加到搜索结果中以使其隐藏,并在转换后删除该类完成(此时它应该保持隐藏,因为你的鼠标不再悬停在它上面)。在Chrome和IE中,如果您不移动鼠标,则删除该类时列表会再次增长。
有没有办法更新浏览器,以便:hover
伪类消失?
这是一个改进的演示,其工作方式几乎相同:http://jsfiddle.net/zZMcv/3/
答案 0 :(得分: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 attrib和datalist元素来避免在做gui建议时出现更多的小问题......