我一直试图弄清楚这一点，但我只是在兜圈子。
本质上，我有一个输入字段，其中包含 2 个可以选择的选项。这不是一个正常的<select>选择，而是一个<ul>2<li>的。这对我正在做的事情很好。
在状态 1：它只是一个普通的输入表单。
在状态2：用户将鼠标悬停在它上面并可以选择（当前处于非活动状态，在下面的示例中为“排除”）。
在状态 3中：单击非活动（排除）选项，并与当前活动（包含）状态切换，导致排除现在成为活动状态。
我把它放在 jsfiddle 上：http: //jsfiddle.net/ULafm/13/—— 我的文本切换在 jsfiddle 上不能正常工作，尽管它在我正在开发的本地服务器上工作）。
最大的问题是在单击非活动状态后摆脱 .form-filter .link a:hover 和 .form-filter .link:hover 的弹出窗口，如上图的状态 2 所示。
我试过做$(".form-filter ul li").removeClass("hover")和其他一些变种，比如
$(".form-filter ul .li:hover").css("display", "none")或者
$(".form-filter ul li a:hover").css("display", "none")但无济于事。
LinkedIn 的搜索与我正在做的事情类似：
总结一个问题：我怎样才能使它在文本切换后，悬停状态消失，看起来像状态 3？
任何帮助将不胜感激。