Hovering does not appear in the exact place

I have a div, and an image inside the div, i am calling jquery hover for the div. I have set the dimensions of the div to 40*30. My problem is that when i am at the buttom of the div the hovering takes effect !!!

this is the code:

<div style=" width: 40px; height: 30px; background-image:url('someImage');cursor:pointer;" class="Div">
 <img src="someimage" style="width: 40px; height: 30px; opacity: 0;" class="Image" />
 </div>

this is the Jquery

$(document).read开发者_JS百科y(function() {

$('.Div').hover(
function() { $("img.Image", this).animate({ "opacity": "1" }); }
   ,
function() { $("img.Image", this).animate({ "opacity": "0" }); }
);
 });

I've put together an example of what I guess you're attempting to do over at http://jsbin.com/uvaje3. I haven't used the separate img tag as it was confusing things... apologies if there was a reason for the separate img tag in which case I won't have answered your question ;)

thank you for your replies, i think i solved my problem. The problem was that somehow i had another div which did not have any content and was overlapping my image !!!!.