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

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

jquery javascript

netadictos · 技术社区 · 14 年前

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

它就像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 回复 | 直到 14 年前

PetersenDidIt 14 年前

试一试 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 14 年前

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

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前