Popup menu with hover class in jQuery (trying to replicate select box with a <ul>)

I've been trying to figure this out for awhile, but I'm just going in circles.

Essentially, I have an input field with 2 options that one can select. This isn't a normal <select> option, rather an <ul> with 2 <li>'s. Which is fine for what I'm doing.

In state 1: it's just a normal input form.

In state 2: the user hovers over it and can choose the (currently inactive state which in the example below is "exclude").

In state 3: The inactive (exclude) option is clicked, and toggled with the currently active (include) state, resulting in exclude now being the active state.

I put this on jsfiddle : http://jsfiddle.net/ULafm/13/ -- My text toggle isn't working properly on jsfiddle, although it does on my local server where I'm developing).

The biggest problem is getting rid of the popup from .form-filter .link a:hover and .form-filter .link:hover after the inactive state is clicked like in state 2 of the image above.

I tried doing $(".form-filter ul li").removeClass("hover") and some other variants, like

$(".form-filter ul .li:hover"开发者_运维知识库).css("display", "none") or

$(".form-filter ul li a:hover").css("display", "none") but to no avail.

LinkedIn's search is a similar example to what I'm doing:

To sum it up in one question: how can I make it so after the text toggles, the hover state disappears to look like state 3?

Any help would be greatly appreciated.

If you want the list to hide after certain events, I would probably control its visibility directly through JS instead of through :hover CSS selectors. Example:

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