Remove .append onmouseout jQuery

Question

I am trying to add a 'read more' text when someone mouseovers my blog post's title. I tried using $(".blogpost").mouseover(function(){ $(this).append(" - read more..."); }); But i don't know how to remove the read more... when onmouseout.

Answer 1

Add read more in span and remove that span on mouse out

Add read more wrapped in span.

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

Remove added span with its id which is read in this case.

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

Answer 2

The proper way to do this is just have the extra text in the HTML already and use a CSS :hover property to hide and show the text. Using javascript for this adds an unnecessary level of complexity and brittleness.

Answer 3

You can try this too:

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

Assuming you have no child elements.

Answer 4

If you want to do this in javascript, You can do something like this :

Demo : http://jsfiddle.net/a3jzF/

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

Answer 5

I would only show and hide it once it's created. .hover() takes two functions.

$(".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();
});

Or use css only (this is better):

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

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