Mouseover-mouseout-Javascript

我想做的是：

当用户将鼠标悬停在图像上时，右上角会出现一个小x（图像）。如果用户点击这个小x，图像应该被删除，当用户点击鼠标时，小x应该消失。我试过几种方法：

html结构是一个ul，其中包含li和一个图像

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

这给了同样的效果，它仍然在闪烁

---

有没有人有其他办法（不需要特定的代码，概念也很受欢迎；）？

用

mouseenter

和

mouseleave

替换

mouseover

和

mouseleave
$（“选择器”）。悬停（addExternalImage，removeExternalButton）
 这与mouseover和mouseout的效果相同（请参阅原始帖子查看代码）奇怪的是，我以前试过这个，但它不起作用，我做了一些css更改。它是有效的。谢谢你的帮助