当鼠标悬停时隐藏并显示弹出窗口

Question

在'nav'里面，当我用jquery悬停在最后一个'a'上时，我想显示一个弹出窗口，但是它不起作用，我也不知道它出了什么问题。 我试图添加可见性：隐藏或显示：.popup都不显示，什么也没发生。想知道我是否可以在这里得到一些帮助。 预先非常感谢。

我在另一个div上尝试了相同的jquery代码，效果很好。我怀疑HTML出了点问题。

我通过将'script scr'移动到标题来解决此问题。

var canvas=document.getElementById('canvas');
  canvas.width = 294;
  canvas.height = 176;

$(document).ready(function () {
    $("#contact").hover(function () {
      $('#popup').show();
    }, 
    function () {
      $('#popup').hide();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
  <ul>
    <li><a href="index.html" class="active">Home<a></li>
    <li><a href="work.html">Work</a></li>
    <li><a href="about.html">About</a></li>
    <li id="contact"><a href="#">Contact</a></li>
  </ul>
</nav>
<div class="popup" id="popup">
      <canvas id="canvas"></canvas>
      
</div>

Answer 1

尝试这样的事情

$( "div#contact" )
  .mouseover(function() {
    $( '#popup' ).show();
  })
  .mouseout(function() {
    // hide here
    // $('#service_menu').hide()
  });