Question

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

按钮hover = 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而不是悬停

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显示隐藏

2 个答案: