"UnHover" Moved Elements with jQuery

Question

I'm using jQuery to move an element to a different position on the page when I click on it. The element is in a "hovered" state because the cursor is over it when I click it. When the element gets to it's new postion it retains it "hovered" state. How can I clear it?

Answer 1

What do you mean by "state"? If it's just the appearance/position of the element you should set this using the ':hover' psuedo css class:

 a { color:#fff; }
 a:hover {
    color: red;
    font-style:bold;
 }

Answer 2

I have a stylesheet with the ':hover' psuedo class set. Using your style definition as an example, the element stays red even though the cursor is no longer over the element.

Answer 3

Try this after the element is moved:

$("#moved_element").mouseout();

Or maybe re-setting element's class using addClass.

Answer 4

Thanks for the suggestions. I tried both of them to no avail. What else can I try?

Answer 5

This is what I use (note this is a plug-in, so should be placed outside your $(document).ready() statement):

(function($) {
/*
    UnHover function
*/
    $.fn.unhover = function(ev) {
        this.each(function() {
            $(this).addClass('unhover').mouseout(function(){
                $(this).removeClass('unhover');
            });
        });
        return this;
    };
})(jQuery);

Attach it like this:

$(document).ready(function(){
    $(a).click(function(){
        $(this).unhover();
        // other onclick code
        return false;
    });
});

The CSS needs .unhover to go with the declaration for the element's natural state, like this:

a, a.unhover { color:#fff; }
a:hover {
    color: red;
    font-weight:bold;
}