Jquery show on hover hide on click

0
votes

I have an element I am trying to have show on hover and stay shown. Then hides when anywhere is clicked or the button previously hovered is clicked. I have code that works, BUT it switches the hover effect if the button is clicked.

Button hover = div shown

div shown and anywhere outside clicked = div hidden

div shown and button clicked = div hides on hover and shows after mouse moves off button

I'd like to have the div hide when the button is clicked and stay hidden after the mouse is no longer hovering. NOT reappear after the mouse moves off the button. 

<script type="text/javascript">
        $(document).ready(function() {
            $('.email-div').hide();
                $('.showemail').hover(function() {
                    var takeClass = $(this).attr('class');
                        $('.email-div').show();
                });
        });
        $(document).on("click", function () {
                $(".email-div").hide();
        });
</script>

<a class="showemail">
    Button
</a>

<div class="email-div">
   <p>Subscribe your email</p>
</div>
2
jqueryhovershow-hide

2 Answers

4
votes

try this:-

 $(document).ready(function() {
   $('.email-div').hide();
     $('.showemail').hover(function() {
              if(!$(this).hasClass('hoverd'))
              {
                  $(this).addClass('hoverd')
                    $('.email-div').show();
              }
     },function(){
     $(this).removeClass('hoverd')
     });
 });
 $(document).on("click", function () {
   $(".email-div").hide();
  });

Demo

2
votes

Try using mouseenter instead of hover

JSFiddle : https://jsfiddle.net/toLt4tfg/1/ 

    $(document).ready(function() {
        $('.email-div').hide();
            $('.showemail').mouseenter(function() {

                    $('.email-div').show();
            });
    });
    $(document).on("click", function () {
            $(".email-div").hide();
    });