在jQuery中使用悬停类的弹出菜单（尝试使用<ul>复制选择框）</ul>

Question

我一直试图弄清楚这一点，但我只是在圈子里。

基本上，我有一个输入字段，其中包含2个可供选择的选项。这不是正常的<select>选项，而是具有2 <ul>的{​​{1}}。这对我正在做的事情很好。

在状态1 ：它只是一个正常的输入形式。

在状态 2：用户将鼠标悬停在其上并可以选择（当前处于非活动状态，在下面的示例中为“排除”）。

在状态3 ：单击非活动（排除）选项，并使用当前活动（包含）状态切换，从而导致排除现在处于活动状态。

我把它放在jsfiddle上：http://jsfiddle.net/ULafm/13/ - 我的文本切换在jsfiddle上运行不正常，尽管它在我正在开发的本地服务器上运行。）

最大的问题是摆脱.form-filter。链接弹出窗口a：hover和.form-filter .link：在点击非活动状态后悬停，就像上图中的状态2一样。

我尝试了<li>和其他一些变种，比如

$(".form-filter ul li").removeClass("hover")或

$(".form-filter ul .li:hover").css("display", "none")但无济于事。

LinkedIn的搜索与我正在做的事情类似：

总结一个问题：如何在文本切换后如此实现，悬停状态消失为状态3？

非常感谢任何帮助。

Answer 1

如果你希望列表在某些事件后隐藏，我可能会直接通过JS控制其可见性，而不是通过：hover CSS选择器。例如：

http://jsfiddle.net/ULafm/16/