Question

I have a photo gallery I would like that every time a user does mouseover the image, there is a button on the top of this image that appears. The user can click on it.
But every time that the user mouse out of the photo it must disappear.

It works like the “change photo” in Facebook, with the photo of your profile.

The problem I am having is that when I try to get over the button that appears (in my code is a link), it disappear because javascript understands that the mouse is just out of the image, even if this button/link is over the image.

The image that I use is positioned absolutely over the image.

This is my code, where you can see that I create a dom element that I append on the link of the image and then when there is a mouseout, I remove it.

$(‘a.ftelement’).mouseover(function()
{

              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(function()
{

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

The result is this graphically (http://www.freeimagehosting.net/uploads/41fbac8994.gif):

Answer 1

Try out the mouseenter and mouseleave events:

$('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();
});

It would be better to only create the link once and then just hide/show it when they hover over:

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);