JQuery: referring to the right "this"

Question

I'm trying to write a very simple plugin that on anchor mouseover increases the respective anchor text size and on mouseout removes the anchor. The problem is that I can't get the right "this". so i have:

    (function($){
 $.fn.extend({
  //function name
  textOverlay : function(){
  //return
  return this.each(function(){
   var cucu = $(this);
   $(this).hover(
    function(){
     cucu.css({'font-size':'20px'});
    },
    function(){
     cucu.remove();
    }
   );
  }); 
  }
 });
})(jQuery);

and I call it like this:

    $(document).ready(function(){
 $('a').thiseOverlay();
});

I guess I should use something like .call() or .apply(), but I'm not sure how, I couldn't find good resources.

Answer 1

It should work if you simply call $('a').textOverlay() instead of $('a').thiseOverlay() what you did.