鼠标移到图片上，图片的右上角显示一个小叉叉，是怎么做的？

Question

我要做的功能是：
鼠标移到图片上，图片的右上角出现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图标，图片不消失。

Answer 1

加一个z-index试试
另：mouseenter内重复绑定click事件，耗费资源

Answer 2

z-index试过，不管用。
IE CHROME点击xx图标没反应。

Answer 3

你的xx和img是分离的，移动到xx上就触发img的mouseout事件隐藏xx了，此时img又mouseenter显示xx，如此循环图片放到一个相对定位的容器里面，xx也放到这个容器里面，绝对定位就行了<div style="float: left;" id="imgs">
<span><img src="Images/hotel/hp.jpg" style="width: 130px; height: 90px; margin-left: 30px; margin-top: 20px;" /></span>
<span><img src="Images/hotel/hp2.jpg" style="width: 130px; height: 90px; margin-top: 20px;" /></span>
<span><img src="Images/hotel/hp3.jpg" style="width: 130px; height: 90px; margin-top: 20px;" /></span>
<span class="hid"><img src="Images/hotel/hp4.jpg" style="width: 130px; height: 90px; margin-top: 20px;"/></span>
<span class="hid"><img src="Images/hotel/hp5.jpg" style="width: 130px; height: 90px; margin-top: 20px;"  /></span>
<span class="hid"><img src="Images/hotel/hp6.jpg" style="width: 130px; height: 90px; margin-top: 20px;"/></span>
</div>
                <style>
                    #imgs span{float:left;position:relative}
                    #imgs span img.xx{position:absolute;right:0px;top:20px;width:12px;height:12px;display:none}
                   .hid {display:none;}
                </style>
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
                <script>
                    $(function () {
                        $('#imgs span').append("<img src='Images/imgs/xx.jpg' class='xx' alt='xx' />");
                    });
                    $("#imgs span").mouseenter(function () {
                        $('img.xx', this).show();
                        $(".xx").click(function () {
                            $(this).closest('span').remove();
                            $('#imgs span.hid:eq(0)').removeClass('hid');
                        })
                    }).mouseleave(function () {
                        $('img.xx', this).hide()
                    });
                </script>

Answer 4

现在jquery 用事件都是用on或者off来启用或者注销事件$('body').on('mouseover','div#imgs',function(){});这样的好处就是可以使用整个body的mouseover同理，你说的闪烁事件，可能就是这个原因。$('div#imgs').on('mouseover','img',function(){
   //do 
});这样去解决就好搞些。 

Answer 5

你指出的问题，我理解了，但是你给的解决方案没理解，能不能给仔细说说？
xx放到容器里面了，这样移动到xx里面还是在容器里面，就不会触发mouseleave事件，除非移动出容器

Answer 6

因为xx是动态创建的，click事件 要使用live绑定，
 
$(".xx").live("click",function () {
                  ...           
 });

Answer 7

你指出的问题，我理解了，但是你给的解决方案没理解，能不能给仔细说说？
xx放到容器里面了，这样移动到xx里面还是在容器里面，就不会触发mouseleave事件，除非移动出容器版主的意思，如果你的XX按钮不是图片标签的字标签的话，会认为鼠标移出的当前图片，所以会激发mouseout事件，所以当你移到XX上就激发mouseout，回来就激发mouseenter，一下消失，一下创建，自然就会出现闪烁的效果了

Answer 8

并不是看到动态创建就要用live绑定的，只要能保证当前时刻的DOM已经在DOM Tree中，就可以直接绑定。显然这里没有live的用武之地。况且，live的本质是什么知道么？相当于把事件绑定到document上，然后每次触发click去判断event target的parent路径上是否有满足这个选择器的元素，DOM结构一深，冒泡损失的性能。live很早就废除了，原因就是不便捷，而且性能不佳。================华丽丽丽丽的分割线线线线（抱歉有回音）====================个人觉得，能用HTML结构+css技巧实现的，不要劳烦js，毕竟，在浏览器中，js能做的，也只是改变html结构和css属性，通过html和css再反馈到UI上有所改变。一个效果，往往需要合理的HTML结构+合理的CSS技巧+适当的JS去完成。LZ的这个，加一些冗余的html结构，配合css去完成，我感觉更明智。
<div class="imgs">
  <a class="img-wrap" href="javascript:void(0)">
    <img class="img" src="img1.jpg"/>
    <i class="img-close-icon"></i>
  </a>
  <a class="img-wrap" href="javascript:void(0)">
    <img class="img" src="img1.jpg"/>
    <i class="img-close-icon"></i>
  </a>
  <a class="img-wrap" href="javascript:void(0)">
    <img class="img" src="img2.jpg"/>
    <i class="img-close-icon"></i>
  </a>
  <a class="img-wrap" href="javascript:void(0)">
    <img class="img" src="img3.jpg"/>
    <i class="img-close-icon"></i>
  </a>>
</ul>
.img-wrap{
  display: block;
  position: relative;
  ...
}
.img-wrap .img{
  display:block;
  ...
}
.img-wrap .img-close-icon{
  display:none;
}
.img-wrap:hover .img-close-icon{
  display:block;
}之所以img-wrap用a标签，是兼容IE6，要不然.img-wrap就不能用:hover了。
下面是点击关闭的js，这个不得不用js了：$(".img-close-icon").click(function(){
  $(this).parent().hide();
});

Answer 9

光想着hover的时候显示，忘了定位了。.img-wrap .img-close-icon{
  display:none;
  position: absolute;
  right: -15px;
  top: -15px;
  display: block;
  background: url(../iamges/close.gif);
  width: 30px;
  height: 30px;
}

Answer 10

总结一下。用一个position:relative的容器把每个图片和关闭按钮包裹起来。关闭图标建议用background-image去做，不要用img标签，position为absolute，然后用right和top定位到右上角。关闭图标默认隐藏，利用包裹容器的:hover伪类，和后代选择器并用，控制关闭图标在整个容器hover的状态下显示。relative+absolute+hover，没有mouseenter，没有动态创建，性能甩开mouseenter+append几条街。