CODEWITHSUNDEEP
jqueryreplacetogglemouseevent
Filippo oretti
Filippo oretti

Reputation: 49813

jQuery toggle mouseover/enter & mouseout with a simple function

I have html.

<p class="textlimity" title="heyheyhey"> asd</p>

now in js i would like to toggle the textlimity text() on mouseover and mouseout so i written.

var textlimity = "";
var texlimity_temp = "";


$(document).ready(function(){


    $('.textlimity').live('mouseenter',function(){
     textlimity = $(this).attr("title");
     textlimity_temp = $(this).html();

     $(this).html(textlimity);
    }).live('mouseout',function(){
         setTimeout(function(){console.log(textlimity_temp);$(this).html(textlimity_temp); },200);
    });

});

logic is simple: on mouseover the .textlimity title="" val() replaces the .textlimity

.html() , and do the opposite on mouseout

I used .html() cause i could have both plain text or html code inside both title="" or

any suggest?

Upvotes: 0

Views: 1340

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

Here is and adaptation of @David's code with all issues resolved..

$('.textlimity').live('mouseenter', function() {
    var self = $(this);
    clearTimeout( self.data('restore') );
    if (!self.data('saved')) {
        self.data('saved', self.html()); // store the original content
    }
    self.html(this.title); // set content from title
}).live('mouseout', function() {
    var self = $(this);
    self.data( 'restore', setTimeout(function() {
        self.html(self.data('saved')); // revert to the stored content
    }, 200) );
});

demo at http://jsfiddle.net/gaby/dQTDZ/4/

Upvotes: 2

David Hellsing
David Hellsing

Reputation: 108500

Looks a bit complicated. How about:

$('.textlimity').live('mouseenter',function(){
    $(this).data( 'saved', $(this).html() ) // store the original content
           .html( this.title ); // set content from title
}).live('mouseout',function(){
     setTimeout(function() {
         $(this).html( $(this).data('saved') ); // revert to the stored content
     }, 200);
});

Fiddle: http://jsfiddle.net/dQTDZ/

Upvotes: 1

Related Questions