JQuery show on hover hide on click

Question

У меня есть элемент, который я пытаюсь показать при наведении и оставаться на экране. Затем скрывается, когда нажимается клик или нажимается кнопка, ранее зависающая. У меня есть код, который работает, НО он переключает эффект наведения, если кнопка нажата.

Кнопка при наведении курсора = ДИВ показаны

ДИВ показано и в любом месте за пределами щелкнул = DIV скрыт

ДИВ показано и кнопка нажата = ДИВ скрывает при наведении курсора мыши и показывает после того, как мышь движется от кнопки

I 'd хотели бы, чтобы div скрывался, когда кнопка нажата и остается скрытой после того, как мышь больше не витает. НЕ снова появляется после того, как мышь отходит от кнопки.

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

Answer 1

попробовать это: -

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

Answer 2

Попробуйте использовать MouseEnter вместо висения

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(); 
    });