jquery - 如何使用 show() 让只出现一个包含子元素

Question

我有一个表，显然有多个 <td>元素。每<td>包含 <div class='surprise' style=' display: none;'> ，我希望将鼠标悬停在 <td> 上时出现。使用下面的代码我能够显示我所有的 <div>的，但我只想要那个 <div>位于 <td> 内我在上面盘旋。我怎样才能做到这一点？

  $(document).ready(function(){
    $('td').hover(function () {
        $('.surprise').show();
    },function () {
        $('.surprise').hide();
    });
  });

我尝试了以下操作，但没有成功:

$(document).ready(function(){
  $('td').hover(function() {
    $('.surprise').one(function() {
      $(this).show();
    });
  });
  },function() {
    $('.surprise').one(function() {
      $(this).hide();
    });
  });
});

Answer 1

我认为使用 CSS 可以更好地处理这个问题。

td .surprise{
   display:none;
}

td:hover .surprise{
   display:block;
}