javascript - 隐藏和显示不适用于悬停()？

Question

我可以看到悬停()正在工作，但它没有隐藏和显示 contact_numbers 类？我的代码有什么问题？

$(function() {
  $("#hdCallUs").hover(function() {
    $(this).find('.contact_numbers').show();
    console.log('in')
  }, function() {
    $(this).find('.contact_numbers').remove()
    console.log('out')
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="hdCallUs">
  <span class="glyphicon glyphicon-earphone"></span>
  <span class="call_txt">Call Us Now</span>

  <div class="contact_numbers">
    <li>999</li>
    <li>888</li>
  </div>
</li>

Answer 1

因为错误Dom html 中的结构

<ul>里面缺少 <div class="contact_numbers">怎么能<li>开始没有 <ul>

在你的问题中你写 隐藏和显示不能与hover()一起使用？比为什么.remove()在你的代码中 如果你想隐藏你的元素使用 .hide()看我的代码

$(function() {
  $("#hdCallUs").hover(function() {
    $(this).find('.contact_numbers').show();
    console.log($(this).find('.contact_numbers'))
  }, function() {
    //$(this).find('.contact_numbers').remove() // this will remove element 
   $(this).find('.contact_numbers').hide() // this will hide
    console.log('out')
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul>
    <li id="hdCallUs">
  <span class="glyphicon glyphicon-earphone"></span>
  <span class="call_txt">Call Us Now</span>

  <div class="contact_numbers">
      <ul>
    <li>999</li>
    <li>888</li>
      </ul>
  </div>
</li>
</ul>