刪除.append onmouseout jQuery

我想在有人將我的博客文章的標題鼠標懸停時添加「閱讀更多」文本。我試過使用 $(".blogpost").mouseover(function(){ $(this).append(" - read more..."); }); 但我不知道如何刪除閱讀更多...當onmouseout。刪除.append onmouseout jQuery

來源

2012-09-26 Nikolay Petrov

使用，.show（）鼠標懸停和鼠標移開時.hide（），在頁面加載使所有的閱讀更加隱蔽。這種方法更好，因爲當頁面加載時你正在抓取它 –

添加更多的跨度和消除對鼠標進行

添加更多包裹在跨度範圍。

$(".blogpost").mouseover(function(){ $(this).append("<span id="read" - read more..."></span>); });

刪除在這種情況下讀取其id的添加span。

$(".blogpost").mouseout(function(){ $('#read').remove(); });

來源

2012-09-26 16:47:40 Adil

正是我一直在尋找。謝謝。 –

不客氣。 – Adil

正確的做法是在HTML中添加額外的文本，並使用CSS：hover屬性隱藏和顯示文本。使用JavaScript爲此增加了不必要的複雜性和易碎性。

來源

2012-09-26 16:47:54 weexpectedTHIS

這是*正確*的方式，恕我直言。做不必要的DOM操作或爲此需要腳本是沒有意義的。 – Sampson

我會補充說，當使用屏幕閱讀器或客戶端沒有JavaScript時，這個解決方案仍然可以工作，因爲從開始以來，「閱讀更多」鏈接就會存在。 – rsinuhe

爲什麼我沒有想到這個？ –

你可以試試這個太：

$(".blogpost").mouseout(function(){ 
    $(this).html(""); 
});

假設你有沒有子元素。

來源

2012-09-26 16:48:22

如果你想這樣做在JavaScript中，你可以做這樣的事情：

演示：http://jsfiddle.net/a3jzF/

$(".blogpost").mouseover(function() { 
    $(this).append("<div class='readmore'> - read more...</div>"); 
}).mouseout(function(){ 
    $('.readmore').remove();   
});

來源

2012-09-26 16:52:48 insomiac

我只會顯示和隱藏它一旦創建它。 .hover（）需要兩個函數。只有

$(".blogpost").hover(function(){ 
    var $span = $(this).find('.more'); 

    if ($span.length) { 
    $span.show(); 
    } else { 
    $(this).append('<span class="more"> - read more...</span>'); 
    } 

}, function(){ 
    var $span = $(this).find('.more'); 
    $span.hide(); 
});

或者利用CSS（這是更好）：

<div class="blostpost"> 
... 
<span class="more">read more</span> 
</div> 

.blogpost .more { display: none; } 
.blogpost:hover .more { display: block; }

來源

2012-09-26 16:53:31 chovy

刪除.append onmouseout jQuery

回答

相關問題