Javascript (jQuery) flasher effect: how to do that?
<p>I want to make a flasher effect: when hover on some specified field there shows anything (yellow icon in my case) and when mouseout it disappeares.</p>

<p>The problem that there are a lot of such similar fields (they will be the comments in future) so I've tried to do all this in one for cycle. But it's not working... I do not know why.</p>

<p><em><strong>Some notes: I have to do that all without html, only in javascript, so I've used document.write method.</em></strong></p>

<p><a href="http://jsfiddle.net/Vitali_Ponomar/TSSn6/" rel="nofollow">Demo on jsfiddle</a></p>

<p>Here the code:</p>

<pre><code>var data = ['one', 'two', 'three'];
for(var i in data){
    (function(){
        $('#id'+i).mouseover(function(){    $("#hdn"+i).show();   });
        $('#id'+i).mouseout(function(){    $("#hdn"+i).hide();   });
    });
    document.write('&lt;div id="id'+i+'" style="border:1px solid;margin:10px 0;float:left;width:100%;"&gt;');
        document.write('&lt;div style="float:left;width:20px;height:20px;"&gt;'+data[i]+'&lt;/div&gt;');
        document.write('&lt;div id="hdn'+i+'" style="display:none;float:right;width:20px;height:20px;"&gt;&lt;img src="http://t0.gstatic.com/images?q=tbn:ANd9GcSa7ebCG4VGWcTTXH8j7ebfpFWhYuV9ojisNmsrnZaQHk8wRMTNqGfaNA" /&gt;&lt;/div&gt;')
    document.write('&lt;/div&gt;');
}
</code></pre>

<p>Thanks!</p>
