2

誰かが私のブログ記事のタイトルにマウスオーバーしたときに、「続きを読む」テキストを追加しようとしています。使ってみた $(".blogpost").mouseover(function(){ $(this).append(" - read more..."); }); But i don't know how to remove the read more... when 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() は 2 つの関数を取ります。

$(".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 に答える