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

鼠标移到图片上，图片的右上角显示一个小叉叉，是怎么做的？
我要做的功能是：
鼠标移到图片上，图片的右上角出现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"> 
 
<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>

[解决办法]

引用:

Quote: 引用:

Quote: 引用:

你的xx和img是分离的，移动到xx上就触发img的mouseout事件隐藏xx了，此时img又mouseenter显示xx，如此循环

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

你指出的问题，我理解了，但是你给的解决方案没理解，能不能给仔细说说？

xx放到容器里面了，这样移动到xx里面还是在容器里面，就不会触发mouseleave事件，除非移动出容器

版主的意思，如果你的XX按钮不是图片标签的字标签的话，会认为鼠标移出的当前图片，所以会激发mouseout事件，所以当你移到XX上就激发mouseout，回来就激发mouseenter，一下消失，一下创建，自然就会出现闪烁的效果了
[解决办法]

引用:

因为xx是动态创建的，click事件 要使用live绑定，

 
$(".xx").live("click",function () {
                  ...           
 });

并不是看到动态创建就要用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();
});

查看更多 下一篇