There seems to be an issue with the code below. Even though it works perfectly in jsfiddle, it breaks in my Chrome and other browsers right after displaying the ".popup" div. Can anyone point out what I might be doing wrong? I found similar code on this site, but none of them had a button to hide the popup within 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>