代码之家 › 专栏 › 技术社区 › netadictos

我想知道如何在mouseover事件中像Facebook那样放置“更改图像”层

jquery javascript

netadictos · 技术社区 · 15 年前

我有一个照片库,我希望每次用户将鼠标移到图像上时,该图像顶部都会出现一个按钮。用户可以点击它。但每次用户将鼠标移出照片,它都必须消失。

它就像Facebook上的“改变照片”,和你的个人资料照片一样。

alt text http://www.freeimagehosting.net/uploads/7f584370dc.gif

我遇到的问题是,当我试图越过出现的按钮(在我的代码中是一个链接)时,它会消失,因为javascript知道鼠标刚好在图像之外,即使这个按钮/链接在图像之上。

我使用的图像绝对位于图像上方。

这是我的代码,在这里您可以看到我创建了一个dom元素,附加在图像的链接上,然后当有mouseout时,我将其移除。

$('a.ftelement').mouseover(函数()) {

              var fav = $('<a></a>');         
              fav.attr("class","imgfavorito");    
  fav.attr("id","fav"+$J(this).attr("id")).html("<img src=\"/im/favorito.gif\"/>");   
              fav.appendTo(this);              });

$('a.ftelement').mouseout(函数()) {

$(“a.imgfavorito”).remove());

结果就是这样( http://www.freeimagehosting.net/uploads/41fbac8994.gif ):

alt text http://www.freeimagehosting.net/uploads/41fbac8994.gif

2 回复 | 直到 15 年前

PetersenDidIt 15 年前

试一试 mouseenter 和 mouseleave 事件:

$('a.ftelement').mouseenter(function(){
    $('<a></a>').attr({
        "class":"imgfavorito",
        "id":"fav"+$J(this).attr("id")
    }).html("<img src=\"/im/favorito.gif\"/>")
    .appendTo(this);
}).mouseleave(function(){
    $(this).find("a.imgfavorito").remove();
});

最好只创建一次链接,然后在其悬停时隐藏/显示链接:

var ftelement = $('a.ftelement').mouseenter(function(){
    imgfavorito.show();
}).mouseleave(function(){
    imgfavorito.hide();
});

var imgfavorito = $('<a></a>').attr({
    "class":"imgfavorito",
    "id":"fav"+$J(this).attr("id")
}).html("<img src=\"/im/favorito.gif\"/>")
.appendTo(ftelement);

Juho Vepsäläinen 15 年前

您可以改为尝试mouseenter和mouseleave事件。见 this blog post 供进一步参考。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

11 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

11 月前

Alex · 在轻量级中同时解构和不解构变量

11 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

11 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

11 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

11 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

11 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

11 月前

user3472810 · Angular@Output/EventEmitter返回undefined

11 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

11 月前