마우스 오버 -로 마우스 - 자바 스크립트

Question

내가 할 노력하고있어 :

사용자가 이미지를 가리킬

이 조금 X (이미지) 오른쪽 상단에 표시됩니다. 사용자가이 작은 x를 클릭하면 이미지가 삭제되어야하고 사용자가 mouseout을 수행하면 작은 x가 사라집니다. 나는 몇 가지를 시도했다 :

HTML 구조가

자바 스크립트 리의과 UL과의 이미지입니다 :

//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

$ ('selector') .hover (addExternalImage, removeExternalButton);

Answer 2

mouseover 및 mouseout을 mouseenter 및 mouseleave으로 바꿉니다.