悬停时显示，使用弹出窗口中包含的按钮隐藏 div

Question

在下面的代码中，我知道我一定是做错了什么，在 jsfiddle 中它工作得很好，但是当我在我的 chrome 或任何其他浏览器中查看时，代码在它之后立即中断显示“.popup”div。我究竟做错了什么？我在这个网站上找到了类似的代码，但是 none 带有按钮将它隐藏在弹出窗口中。

$(document).ready(function() {
  $('.featured')
    .mouseenter(function() {
      $('.popup').show();
    })
  $('.exit').click(function(e) {
    e.preventDefault();
    $('.popup').hide();
  });


});

.popup {
  display: none;
}
.featured {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="featured">FEATURED</a>



<div class="popup">
<ul>
<li>EYE</li>
<li>LOVE</li>
<li>ROCK</li>
<li>AND</li>
<li>ROLL</li>
<li><input class="exit" value="close" type=button /></li>
</ul>
</div>

Answer 1

您的 <a> 标签没有关闭 </a>

我没有任何问题运行在这个 jsfiddle 中：

<a class="featured">FEATURED</a>



<div class="popup">
<ul>
<li>EYE</li>
<li>LOVE</li>
<li>ROCK</li>
<li>AND</li>
<li>ROLL</li>
<li><input class="exit" value="close" type=button /></li>
</ul>
</div>

$(document).ready(function() {
  $('.featured')
    .mouseenter(function() {
      $('.popup').show();
    })

  $('.exit').click(function(e) {
    e.preventDefault();
    $('.popup').hide();
  });


});

https://jsfiddle.net/eg2zp0fp/

悬停时显示，使用弹出窗口中包含的按钮隐藏 div

Show on hover, hide with button contained in popup div

javascript

jquery

html

css

jquery-hover