Mouseover - MouseOut - Javascript

Question

то, что я пытаюсь сделать:

Когда пользователь наводит указатель мыши на изображение, немного х (изображение) появится в правом верхнем углу. Если пользователь нажимает на это маленькое x, изображение должно быть удалено, и когда пользователь делает мышь, маленький x должен исчезнуть. Я попробовал несколько вещей:

HTML структура является уль с Ли и изображение в нем

Javascript:

//On all the li's in the ul 

$("li",$flickrKeyUlPreview).mouseover(addExternalImage); 

var addExternalImage = function(){ 

     //Get the offset of the image the user is hovering over 
     var offset = $(this).offset(); 

     //Move the little x button to the image 
     $flickrDetailButton.offset(offset); 

     //Set it visible 
     $flickrDetailButton.css("visibility","visible"); 

     //Bind the event for the mouseout 
     $flickrDetailButton.mouseout(removeExternalButton); 
}; 

var removeExternalButton = function(){ 

     //Hide the little x 
     $flickrDetailButton.css("visibility","hidden"); 
}; 

Причина этого не работает: Когда пользователь парит над маленькое изображение запускается с помощью мыши.

Я также попытался:

$("li",$flickrKeyUlPreview).mouseover(addExternalImage); 

    var addExternalImage = function(){ 
     $(this).unbind('mouseover'); 
     var emptyObject = {}; 
     $(this).append($.TemplateRenderer($flickrDetailButton,emptyObject)); 
     $flickrDetailButton = $('#flickr_detail_button',rootel); 
     $(this).mouseout(removeExternalButton); 
    }; 


    var removeExternalButton = function(){ 
     $(this).unbind('mouseout'); 
     $flickrDetailButton = $('#flickr_detail_button',rootel); 
     if ($($flickrDetailButton, $(this))) { 
      $($flickrDetailButton, $(this)).remove(); 
     } 
     $(this).mouseover(addDelBtn); 
    }; 

This doesn't work that well, the little x starts flickering. 

Пробовал это тоже:

$("li",$flickrKeyUlPreview).mouseenter(addExternalImage); 

    var removeExternalButton = function(){ 
     $flickrDetailButton = $('#flickr_detail_button', rootel); 
     if ($($flickrDetailButton, $(this))) { 
      $($flickrDetailButton, $(this)).remove(); 
     } 
     $(this).mouseenter(addExternalImage); 
    }; 


    var addExternalImage = function(){ 
     var emptyObject = {}; 
     $(this).append($.TemplateRenderer($flickrDetailButtonTemplate,emptyObject)); 
     $flickrDetailButton = $('#flickr_detail_button',rootel); 
     $(this).mouseout(removeExternalButton); 
     $flickrDetailButton.mouseleave(removeExternalButton); 
    }; 

Это дало тот же эффект, что еще мерцающий

Кто-нибудь есть еще одна идея, как это сделать это (не нужны конкретные коды, понятия тоже ценятся;))?

Answer 1

$ ('селектор'). Hover (addExternalImage, removeExternalButton);

Answer 2

Заменить mouseover и mouseout с mouseenter и mouseleave.