鼠标移到图片上，图片的右上角显示一个小叉叉，是如何做的

鼠标移到图片上，图片的右上角显示一个小叉叉，是怎么做的？
我要做的功能是：
鼠标移到图片上，图片的右上角出现xx图标，然后点击xx图标，该图片消失，后续图片补上。

css:

.hid {

            display:none;

        }

.xx {

            width:12px;

            height:12px;

        }

js:

$("#imgs img").mouseenter(function () {

                var myself = $(this);

                var xx = $("<img src='Images/imgs/xx.jpg' class='xx' />");

                var top = $(this).offset().top;

                var left = $(this).offset().left + $(this).width() - 12;

                xx.css({ "position": "absolute", "top": top, "left": left, "display": "" });

                $(document.body).append(xx);



                $(".xx").click(function () {

                    myself.hide();

                    $("#imgs img").each(function () {

                        if ($(this).hasClass("hid")) {

                            $(this).removeClass("hid");

                            return false;

                        }

                    });

                });

            }).mouseleave(function () {

                $(".xx").hide();

            });

html:

<div style="float: left;" id="imgs">

                    <img src="Images/hotel/hp.jpg" style="width: 130px; height: 90px; margin-left: 30px; margin-top: 20px;" />

                    <img src="Images/hotel/hp2.jpg" style="width: 130px; height: 90px; margin-top: 20px;" />

                    <img src="Images/hotel/hp3.jpg" style="width: 130px; height: 90px; margin-top: 20px;" />

                    <img src="Images/hotel/hp4.jpg" style="width: 130px; height: 90px; margin-top: 20px;" class="hid" />

                    <img src="Images/hotel/hp5.jpg" style="width: 130px; height: 90px; margin-top: 20px;" class="hid" />

                    <img src="Images/hotel/hp6.jpg" style="width: 130px; height: 90px; margin-top: 20px;" class="hid" />

                </div>

我是这样做的，不知道一般普遍的方法是什么。
我的问题是：
当鼠标移到xx图标上时，xx图标有时候会隐去或闪烁。
功能上，火狐没问题，而IE和CHROME没反应，点击xx图标，图片不消失。
------解决方案--------------------
你的xx和img是分离的，移动到xx上就触发img的mouseout事件隐藏xx了，此时img又mouseenter显示xx，如此循环

图片放到一个相对定位的容器里面，xx也放到这个容器里面，绝对定位就行了

<div style="float: left;" id="imgs">