title: Jquery to show block on mouse over
body: <p>Here is the <a href="http://www.b2bscriptonline.com/" rel="nofollow">live</a> site where I am doing my stuff. Now in that link you can see there is one section called <code>Source from Top Global Suppliers</code> in that section you can see there is a block called <code>Hot Regions</code>. Now when you will make hover your mouse you can see it is showing a block with some country's flags.But when you will move your mouse to one of the flag then the box is hiding.But I want that when you will move your mouse to any of those flag still the box will be there. I have followed <a href="http://www.alibaba.com/" rel="nofollow">this</a> site for that hover section.</p>
  
  <p>my jQuery code for that block is like this</p>
  
  <pre><code>jQuery(document).ready(function() {
      jQuery('.hr-current').mouseover(function() {
        jQuery('#hot-regions').addClass('hr-hover');
      });
      jQuery('.hr-current').mouseout(function() {
        jQuery('#hot-regions').removeClass('hr-hover');
      });
    });
  </code></pre>
  
  <p><strong>Note</strong></p>
  
  <p>Here is the link for fiddle
  here is the link for fiddle <a href="http://jsfiddle.net/NewUserFiddle/y53WQ/" rel="nofollow">http://jsfiddle.net/NewUserFiddle/y53WQ/</a>
  I want the result will be exactly like the referenced link...</p>