Search code examples
jqueryappendmouseovermouseout

Remove .append onmouseout jQuery

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.

Solution

  • 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(); });