jquery - 如何在悬停时在每个 img 标签上叠加 png

Question

好的，这是我的代码:

<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 的透明 .png 元素。我希望它在用户悬停链接时淡入。

我不能用 CSS sprites 做这个，因为缩略图是由 wordpress 自动生成的，这必须易于使用。我只是想让 jQuery 将 png 放在 img 元素之上。

这并没有那么难，但我在任何地方都找不到确切的解决方案。

非常感谢。

Answer 1

使用 mouseenter .如果您不想在悬停时添加图像，您也可以将其附加到 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();
});