Jquery显示悬停时隐藏点击

Question

我有一个元素，我试图在悬停时显示并保持显示。然后在单击任何地方或单击先前悬停的按钮时隐藏。我有工作的代码，但它切换悬停效果，如果按钮被点击。

按钮悬停=div show

div显示和外部任何地方点击=div隐藏

div显示并点击按钮=div在鼠标悬停时隐藏，鼠标移开按钮后显示

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

演示

Answer 2

尝试使用鼠标进入来代替悬停

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