Question

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?

CSS

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

HTML

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

JS

$(document).ready(function () {

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

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

});

Answer 1

You want to use both the in and out parts of the hover handler instead of mouseout for the out handler. The reason is that mouseout will trigger if the event target changes to the inner element, but you don’t want that.

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

​See demo