删除 .append onmouseout jQuery答案

【问题标题】：Remove .append onmouseout jQuery删除 .append onmouseout jQuery
【发布时间】：2012-09-26 16:45:28
【问题描述】：

当有人将鼠标悬停在我的博客文章标题上时，我正在尝试添加“阅读更多”文本。我尝试使用$(".blogpost").mouseover(function(){ $(this).append(" - read more..."); }); 但我不知道如何删除阅读更多内容...当 onmouseout 时。

【问题讨论】：

使用，在鼠标悬停时使用 .show()，在鼠标悬停时使用 .hide()，在页面加载时使所有阅读内容更加隐藏。这种方法更好，因为您在页面加载时获取它

标签： jquery append mouseover mouseout

【解决方案1】：

正确的做法是在 HTML 中已有额外的文本，并使用 CSS :hover 属性来隐藏和显示文本。为此使用 javascript 会增加不必要的复杂性和脆弱性。

【讨论】：

这是正确的方式，恕我直言。进行不必要的 DOM 操作或为此编写脚本是没有意义的。
我要补充一点，当使用没有 javascript 的屏幕阅读器或客户端时，此解决方案仍然有效，因为“阅读更多”链接从一开始就存在。
我怎么没想到？

【解决方案2】：

在跨度中添加阅读更多内容并在鼠标移出时删除该跨度

在 span 中添加阅读更多内容。

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

删除添加的跨度及其在这种情况下读取的 id。

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

【讨论】：

正是我一直在寻找的。谢谢。

【解决方案3】：

你也可以试试这个：

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

假设您没有子元素。

【讨论】：

【解决方案4】：

如果你想在 javascript 中做到这一点，你可以这样做：

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

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

【讨论】：

【解决方案5】：

我只会在它创建后显示和隐藏它。 .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; }

【讨论】：