Question

当有人抓住我的博客帖子标题时，我正在尝试添加“阅读更多”文字。我尝试使用$(".blogpost").mouseover(function(){ $(this).append(" - read more..."); }); 但我不知道如何删除阅读更多...当onmouseout。

Answer 1

执行此操作的正确方法是在HTML中添加额外的文本并使用CSS：hover属性来隐藏和显示文本。使用javascript会增加不必要的复杂性和脆弱性。

Answer 2

在span中添加更多内容并在鼠标输出时删除该范围

添加包含在span中的更多内容。

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

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

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

Answer 3

你也可以试试这个：

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

假设您没有子元素。

Answer 4

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

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

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

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

删除.append onmouseout jQuery

5 个答案: