CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-hover
MessatsuX
MessatsuX

Reputation: 35

Show on hover, hide with button contained in popup 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. 

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

Upvotes: 1

Views: 1943

Answers (1)

Bryant Frankford
Bryant Frankford

Reputation: 391

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

I don't have any problems running it here in this 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/

Upvotes: 2

Related Questions