2

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

4

5 回答 5

6

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

于 2012-09-26T16:47:54.667 回答
5

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

添加阅读更多包裹在跨度中。

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

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

$(".blogpost").mouseout(function(){ $('#read').remove(); });
于 2012-09-26T16:47:40.493 回答
1

你也可以试试这个：

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

假设您没有子元素。

于 2012-09-26T16:48:22.973 回答
0

如果您想在 javascript 中执行此操作，您可以执行以下操作：

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

$(".blogpost").mouseover(function() { 
    $(this).append("<div class='readmore'> - read more...</div>"); 
}).mouseout(function(){
    $('.readmore').remove();        
});​
于 2012-09-26T16:52:48.110 回答
0

我只会在创建后显示和隐藏它。.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-26T16:53:31.937 回答