jquery - jQuery - 表格和链接检测显示和隐藏

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

您希望同时使用处理程序的 in 和 out 部分，hover而不是mouseout使用 out 处理程序。原因是mouseout如果事件目标更改为内部元素，则会触发，但您不希望这样。

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

​查看演示

Answer 2

只需添加：

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

准备好给你的文件