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×100px透明的.png元素。当链接被用户盘旋时，我想让它淡入。

我不能用CSS精灵来做这件事，因为缩略图是由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();
});

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

1 个答案: