好的,这是我的代码:
<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 元素之上。
这并没有那么难,但我在任何地方都找不到确切的解决方案。
非常感谢。
最佳答案
使用 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();
});
关于jquery - 如何在悬停时在每个 img 标签上叠加 png,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7972877/