伪类:当Max-Height改变时,悬停仍然存在

时间:2013-06-14 17:20:59

标签: javascript css drop-down-menu mouseevent pseudo-class

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

搜索结果使用css-transitions来隐藏/显示,所以我控制它,max-height被设置为500px(比列表可能更大)和0。

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

有没有办法更新浏览器,以便:hover伪类消失?

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

1 个答案:

答案 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建议时出现更多的小问题......