Question

Soory if I didn’t show you all the code, because I am not sure how to implement it, what I try to do is that suppose this is a picture following:

  #photo{ width:100px;height:120px;}
  <div id="photo"><img src="myphoto.jpg"/></div>

and I have edit photo box:

   #edit{width:60px;height:30px;background:#000000;color:#ffffff}
  <div id="edit">edit it</div>

When I hover the image, i want the edit phot box display in the top right corner of the image, and when the cursor move out of the image, it will be disappeared.

So I assume using the following

     $("#photo img").hover(function() {
    $("#edit").fadein();
 }, function() {
    $("#edit").hide();
    });

any one could help me with it, thanks a lot!

Answer 1

That’s basically it. You also need to (a) hide the #edit element on load using display:none in your stylesheet, (b) change fadein to fadeIn (capital I), and probably (c) position the #edit element absolutely inside the #photo div so it doesn’t reflow the page when it appears and disappears.

update: Oh, and (d) add a mouseover to the #edit element so that moving the mouse over it doesn’t register as a mouseout of the image:

$("#edit").mouseover(function() {
  $(this).show();
});

http://jsfiddle.net/mblase75/bNmAd/2/