Question

在下面的代码中，我知道我必须做错事，在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>

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中包含的按钮

1 个答案: