title: HTML onmouseover doesn't work to show up text
body: <p>I'm trying to show some information on a picture when onmouseover/onmouseout event occurs. What I want to achieve is something like <a href="http://www.piercedfish.com" rel="nofollow">this website</a> does on top selling.</p>
  
  <p>My code is like this:</p>
  
  <pre><code>&lt;div class="container" onmouseover="$('#info').css('display','block');" onmouseout="$('#info').css('display','none');"&gt;
  &lt;img src=..."&gt;
      &lt;div id="info" style="display:none"&gt;
         ... some text ...
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So div info block is initially hidden, but when mouse is on a picture I want the information
  to appear on corresponding picture (with tint background on the image to see text well). But somewhat it doesn't work. I appreciate any suggestion how to approach this problem.</p>
  
  <p>Edit: I forgot to mention that div id info is not exist in css. I'm not sure that I need to dynamically create rule and attach it to body. In addition, the reason why I choose to use inline because I need to show/hide text corresponding to the image(contain unique div id)that user put their mouse on/out. That means I have many div container and each container has unique div id.</p>