我已经尝试解决这个问题有一段时间了，但我只是在兜圈子。
本质上，我有一个输入字段，其中有 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？
任何帮助将不胜感激。
最佳答案
如果您希望列表在某些事件发生后隐藏，我可能会直接通过 JS 而不是通过 :hover CSS 选择器来控制其可见性。示例:
关于javascript - jQuery 中带有悬停类的弹出菜单(尝试使用 <ul> 复制选择框)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7694942/