.on not working after .off

.on not working after .off

Dear All

I am using following code for mouse enter and mouseleave effect

  1. $('.basesmall').mouseenter(function(){ 
  2.       $(this).find('img').stop().fadeTo('slow', 1); 
  3.      });   
  4. $('.basesmall').mouseleave(function(){
  5.        $(this).find('img').stop().fadeTo('slow', 0); 
  6.      });     
Basically managing the opacity of image residing inside the div
when mouse is entered, the opacity is full
and when mouse leaves, the pacity is zero (not visible)


On click i want to keep the image visible
In order to do this , I am using following code to unbind moutleave, mouseenter effect
 
 
  1. $('.basesmall').off('mouseenter').off('mouseleave');
  2. $('#'+thisid).css('opacity',1);

As a result the image opacity remain 1 even after click and remains as it is even after mouse leave.

no issues till this code

but when i try to unbind or on using following code, and try to  ON or UNBIND these events
These events remain OFF or unbind

Please guide where I am making mistake

  1.  $(".basesmall > img").on("mouseenter", function(){   $(this).find('img').stop().fadeTo('slow', 1);   });
      $(".basesmall > img").on("mouseleave", function(){   $(this).find('img').stop().fadeTo('slow', 0);   });