Jquery 如何在悬停时的每个img标记上覆盖png

好的，这是我的代码：

<div class="latest-post">
    <a href="http://localhost/blaze/2011/documentaries/test-big-thumb" rel="bookmark">               
    <span>     
    <img width="140" height="100" src="http://localhost/blaze/wp-content/uploads/2011/10/DSC02798-140x100.jpg" class="attachment-latestvideos wp-post-image" alt="DSC02798" title="DSC02798" />
    </span>
    </a>   
</div>

我想在每个img的顶部放置一个140px x 100px的transparent.png元素。我想这是淡入时，链接是由用户悬停

我不能用CSS精灵来实现这一点，因为缩略图是由wordpress自动生成的，而且必须易于使用。我只是希望jQuery将png放在img元素的顶部

这不难，但我在任何地方都找不到精确的解决方案

非常感谢。

使用。如果不想在悬停时添加图像，也可以将其附加到document.ready中，并在悬停图像时使其可见

<style>
  .hoverlink { display: block; position: relative; }
  .hoverPng { position: absolute; left: 0px; top: 0px; 
</style>

$("a.hoverlink").mouseenter(function() {
  $(this).append("<img src='/stuff.png' class='hoverPng'>");
}).mouseleave(function() {
  $(this).find(".hoverPng").remove();
});

.hoverlink{显示：块；位置：相对；}
.hoverPng{位置：绝对；左侧：0px；顶部：0px；
$（“a.hoverlink”）.mouseenter（函数（）{
$（此）。追加（“”）；
}).mouseleave（函数（）{
$（this.find（“.hoverPng”）.remove（）；
});

使用。如果不想在悬停时添加图像，也可以将其附加到document.ready中，并在悬停图像时使其可见

<style>
  .hoverlink { display: block; position: relative; }
  .hoverPng { position: absolute; left: 0px; top: 0px; 
</style>

$("a.hoverlink").mouseenter(function() {
  $(this).append("<img src='/stuff.png' class='hoverPng'>");
}).mouseleave(function() {
  $(this).find(".hoverPng").remove();
});

.hoverlink{显示：块；位置：相对；}
.hoverPng{位置：绝对；左侧：0px；顶部：0px；
$（“a.hoverlink”）.mouseenter（函数（）{
$（此）。追加（“”）；
}).mouseleave（函数（）{
$（this.find（“.hoverPng”）.remove（）；
});