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

【问题标题】：Pseudo-Class :hover persists when Max-Height changes伪类：当 Max-Height 改变时悬停仍然存在
【发布时间】：2013-06-15 04:29:19
【问题描述】：

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

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

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

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

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

【问题讨论】：

将列表设置为 display:none，然后 setTimeout 在 100ms 后将其转回 display:block。当它被隐藏时， :hover 将被解除，并且由于它重新出现时会很小，因此它不再位于鼠标光标下。您可能必须禁用过渡效果才能获得足够的时间让列表从鼠标指针下方缩小，临时 className 将 transition-duration 设置为 0 可以满足要求...
是的，仅仅依靠 jQuery 来改变显示属性就可以完美地工作，它在 Chrome 中延迟 0 毫秒，但在 IE 中延迟 120 毫秒。所以只需将这两行添加到setTimeout(function, 350) 页面即可：v.hide(); setTimeout(function(){v.show();},120); 发表您的评论作为答案，我会接受它：O
很高兴它可以工作，但很匆忙；我会让有野心的人先来抢答案，有人吗？
稍后再放入 :P 我不介意在两天内或任何时候标记它。但我不会因为某人没有想到的事情而奖励他们，除非这是一个更有效的替代答案。
np，我回来并发布了一个解决方案（我认为）......

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

【解决方案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；

或者，顺便说一句，在好的浏览器中，您可以将输入上的列表属性与 datalist 元素结合使用，以避免在执行 gui 建议时出现更多小问题...

【讨论】：