如何让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();
    });
  });
});

我试过跟随，没有成功：

CheeseTypes = ["cheddar", "gouda", "camembert"]
def find_the_cheese(a)
  (a & CheeseTypes).first
end

Answer 1

我认为使用CSS可以更好地处理它。

td .surprise{
   display:none;
}

td:hover .surprise{
   display:block;
}

Answer 2

如果<td>包含子元素，请使用$(this).find()，以便它仅影响当前的<td>：

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