にはどうすればいいので、ここで[OK]をホバー

Question

上のすべての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 100pxにすることにより透明.pngの要素を敷設したいです。私はリンクがユーザーによって跳ね上がったときにこれが消えることを望みます。

サムネイル画像が自動でワードプレスによって生成されていて、これが使いやすいように持っているので、私はCSSスプライトでこれを行うことはできません。私は、単純にjQueryがimg要素の上にpngをドロップするようにします。

これは難しいが、私はこのどこかへの正確な解決策を見つけることができないことをすることはできません。

多くのありがとうございます。

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(); 
});