在悬停时显示，隐藏弹出div中包含的按钮

In the code below, I know I have to be doing something wrong, in the jsfiddle it works perfectly, but when I look at in my chrome or any other browser, the code breaks right after it shows the ".popup" div. What am I doing wrong? I found similar code on this site, but none with the button to hide it in the popup itself.

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

$(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>

1 个解决方案

#1

Your <a> tag isn't closed </a>

您的标记未关闭

I don't have any problems running it here in this jsfiddle:

我在这个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/

#1