jQuery - table＆amp; link detect show＆amp;隐藏

Question

当我将鼠标悬停在tr上时，该块会显示，但当鼠标移动到标记时，该块将被隐藏。 悬停链接或文本时如何操作，块保持显示？

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

您想要使用hover处理程序的输入和输出部分而不是mouseout作为输出处理程序。原因是如果事件目标更改为内部元素，mouseout将触发，但您不希望这样。

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

​See demo

Answer 2

只需添加：

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

准备好你的文档