Jquery 在悬停时显示在点击时隐藏

Question

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

按钮悬停 = div 已显示

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

Demo

Answer 2

尝试使用 mouseenter 而不是 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();
    });

Jquery 在悬停时显示在点击时隐藏

Jquery show on hover hide on click

jquery

hover

show-hide