jQuery - table & link detect show & hide
<p>When I hover on the tr the block will show, but when mouse move to  tag the block will hidden.
How to do when hover the link or text,the block keep display?</p>

<p><strong>CSS</strong></p>

<pre><code>.block{ display:none;width:50px; height:50px; background-color:#CCC;}
td{ border:1px solid #999;}
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;table width="300" border="0" cellspacing="0" cellpadding="15"&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;a href="#"&gt;Test1&lt;/a&gt;&lt;div class="block"&gt;1&lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;a href="#"&gt;Test2&lt;/a&gt;&lt;div class="block"&gt;2&lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;a href="#"&gt;Test3&lt;/a&gt;&lt;div class="block"&gt;3&lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;a href="#"&gt;Test4&lt;/a&gt;&lt;div class="block"&gt;4&lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;a href="#"&gt;Test5&lt;/a&gt; &amp;&amp; &lt;strong&gt;BoldText&lt;/strong&gt;&lt;div class="block"&gt;5&lt;/div&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p><strong>JS</strong></p>

<pre><code>$(document).ready(function () {

        $("tr").hover(function(){
             $(this).find(".block").show();
        });

        $("tr").mouseout(function(){
             $(this).find(".block").hide();
        });

});
</code></pre>
