CODEWITHSUNDEEP
javascriptjquery
Jon
Jon

Reputation: 8511

jQuery .hover() auto return to previous state

I am wondering if there is a simple solution where after the user un-hovers, the data will return to its original state? My current solution is to save the original state, and load this data once the user has un-hover. This can become tedious as each hover changes alot of text fields, and it is a hassle to store all this information.

I am essentially wondering if there is something in JavaScript/jQuery something like the CSS :hover where it will auto return to its original state?

Upvotes: 0

Views: 3338

Answers (3)

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

A solution is to "store" the original state by keeping it, hidden but otherwise unaltered, in the DOM.

Instead of changing the original text fields :

  • onmouseover: create clones and modify them as required; hide the original text fields.
  • onmousout: remove (or hide) the clones and show the original text fields.

On next mouseover, you can do the same again or simply re-show the hidden clones depending on whether or not the previous clones are still relevant.

Upvotes: 2

greduan
greduan

Reputation: 4938

I believe this is default behaviour already:
http://api.jquery.com/hover/

If it isn't then you should probably use .mouseover and .mouseout: http://api.jquery.com/mouseover/
http://api.jquery.com/mouseout/

You would simply have to work out the logic so that it changes the content on these events. ;)

Hope this helps. :)

Upvotes: 1

Jamie Hayman
Jamie Hayman

Reputation: 1299

Maybe this might help, but you need to provide us with more information and some sample code.

Anyway you could store the entire HTML of the selector before the user has hovered then restore it after.

$('#button').hover(
    function(){
        var oldData = $('#data').html();        
    },
    function(){
        $('#data').html(oldData);

    }
);

Would this help you?

Upvotes: 1

Related Questions