將鼠標懸停在鏈接上時更改div內容？

我想要將鼠標懸停在其他文本上時更改div的文本。將鼠標懸停在鏈接上時更改div內容？

如何使用JavaScript或jQuery來做到這一點？

<a href="#">change your div text</a> 
<div class="original"> 
    <p class="old">this is my first quesstion on stackoverflow and i hope to be solved</p> 
</div> 

<p class="new"> the new text i want to add</br> 
i will use big text really and i want to change it</p>

懸停在上面的鏈接時新p類我怎麼能取代舊p類，我怎麼能得到它返回到原來的類徘徊停止時？

來源

2014-07-02 Css Man

這也適用4我 $（ 'A'）。 hover（function（）{（'。old'）。hide（）; $（'。new'）。show（）; }，function（）{（'。old'）。show（）; $（'。new'）。hide（）; }）; with css .new { display：none; } 我不知道爲什麼這篇文章刪除？ IAM新的堆棧溢出？但這也是一樣的東西如何在新文本中留下一段時間（複製或其他）？它會自動消失，我無法觸及新文本？ –

如果您想使用jQuery，您可能會尋找.hover()函數。

它接受鼠標進入（和退出）元素時的一個或兩個處理程序。

var old = $(".old").html(); 
var now = $(".new").html(); 
$("a").hover(function(){ 
    $(".old").html(now); 
}, function(){ 
    $(".old").html(old); 
});

此存儲你原來的old文字和now新的文本（new是一個保留字）。 mouseenter處理程序將文本更改爲新文本，然後mouseexit處理程序將其更改回原始。

爲此，您需要將新文本設置爲hidden（請參閱演示）。

Demo

來源

2014-07-02 01:25:21 AstroCB

是的，它運作良好4我，但如何留在一段時間在新的文本（使複製或其他）？它會自動消失，我無法到達新文本以製作新文本的副本？ –

@CssMan當然：看看[this]（http://jsfiddle.net/AstroCB/42gV5/3/）。等待5秒鐘，然後再回到舊文本。如果你想改變時間，改變'setTimeout'中的'5000'（以毫秒爲單位）。順便說一下，如果我的答案適用於您，請點擊旁邊的灰色複選標記以考慮[接受它]（http://stackoverflow.com/help/accepted-answer），以便我們都獲得聲譽]（http://stackoverflow.com/help/whats-reputation）。 – AstroCB

我需要的是：1-當鼠標懸停在鏈接上它將舊文本更改爲新的2-我可以移動到新文本而不消失以製作副本或閱讀良好3-當鼠標懸停時新文本返回到舊版本！我希望現在清楚，但我不需要它受時間限制，我需要它在鼠標移出新文本時受到限制，並且感謝4您的努力 –

@AstroCB的答案是正確的。

@Css Man：爲了您的額外要求，您可以使用setTimeout方法。

var old = $(".old").html(); 
var now = $(".new").html(); 
$("a").hover(function(){ 
    $(".old").html(now); 
}, function(){ 
    setTimeout(function() { 
    $(".old").html(old); 
    }, 2000); 
});

觀看演示：http://jsfiddle.net/Teddy_Heaven/42gV5/2/

更新：對於新的4個步驟要求：

var old = $(".old").html(); 
var now = $(".new").html(); 
$("a").hover(function(){ 
    $(".old").html(now); 
}, function(){ 
    // make time to change your mouse from <a> to <p> (here is 2s) 
    var timer = setTimeout(function() { 
     $(".old").html(old); 
     // if timeout, unbind (A) 
     $(".old").unbind('mouseenter mouseleave'); 
    }, 2000); 

    // if you hover <p>, there are new business (A) 
    $(".old").hover(function() { 
     clearTimeout(timer); 
    }, function() { 
     $(".old").html(old); 
    }); 
});

演示：http://jsfiddle.net/Teddy_Heaven/42gV5/6/

來源

2014-07-02 03:19:24 teddy

是的，你是對的，你和@AstroCB都是正確的，但我不需要它的時間，當我將鼠標懸停在新的文本上時，我需要它回到舊的！ –

我需要什麼：1-當鼠標懸停在鏈接它將舊文本更改爲新的2-我可以移動到新的文本而不消失做一個副本或閱讀良好3-當懸停出新的文本返回到舊的！我希望現在清楚，並感謝你的努力 –

將鼠標懸停在鏈接上時更改div內容？

回答

相關問題