Question

我有HTML。

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

现在在js我想在mouseover和mouseout上切换textlimity text（），所以我写了。

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);
    });

});

逻辑很简单：在mouseover上.textlimity title =“”val（）替换.textlimity

.html（），并在mouseout上执行相反的操作

我使用.html（）因为我可以在title =“”或

中同时包含纯文本或html代码有什么建议吗？

Answer 1

以下是对@David's code的修改以及所有问题的解决..

$('.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) );
});

演示http://jsfiddle.net/gaby/dQTDZ/4/

Answer 2

看起来有点复杂。怎么样：

$('.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);
});

小提琴：http://jsfiddle.net/dQTDZ/

jQuery toggle mouseover / enter＆amp;具有简单功能的mouseout

2 个答案: