jquery単純なスワップp要素ですか？

Question

はそうのようなp要素を考える： <p>Something</p>状態： <p>Something</p>は私がしたい、それ以上のユーザーマウスを置いたが、我々が持っている場合、代わりに<p><a href="blabla.org">go here</a></p>

マウスは、pエリアを離れた場合ホバリングした後、以前に戻ります。

このような簡単な例がありますか？

どうもありがとう、 MEM

Answer 1

や物事を追跡するために.data()を使用していますケンRedlerのオリジナルの簡単な修正：

$('p#someID').hover( 
    function() { 
     var $this = $(this); 
     $this.data('orig', $this.html()).html('<a href="blabla.org">go here</a>'); 
    }, 
    function() { 
     var $this = $(this); 
     $this.html($this.data('orig')).removeData('orig'); 
    } 
); 

http://www.jsfiddle.net/ambiguous/FhET2/1/

Answer 2

更新：@Phrogzが指摘するようには、私は質問の意味の一部を逃しました。閉鎖での状態をキャプチャするかdata()を使用しての提案は良いものですが、ここでは（可動部分の面白い数と）別の方法があります：

span.hide { 
    display: none; 
} 

：

$(document).ready(function(){ 
    $('p#someID').hover( 
    function() { // on mouseEnter 
     $(this) 
     .contents() 
     .wrap('<span class="hide"/>') // wrap 'n' hide 
     .end() // back to 'this' 
     .append('<a href="blabla.org">Fascinating Link!</a>'); // add link 
    }, function() { // on mouseLeave 
     $(this) 
     .find('a') 
     .remove() // kill the anchor 
     .end() // back to 'this' 
     .find('span.hide') // the wrapper 
     .contents() // the wrapped 
     .unwrap(); // kill the wrapper, leaving its contents 
    }); 
}); 

これはそうのようなスタイルを想定しています更新例：これは、すべてのテキストを置き換えますhttp://www.jsfiddle.net/redler/HAGzH/1/

Answer 3

$('p#IDHERE').hover( 
    function(){ // on mouseEnter 
     $(this).contents().replaceWith('<a href="blabla.org">go here</a>'); 
    }, 
    function(){ // on mouseLeave 
     $(this).contents().replaceWith("something"); 
    } 
);