jquery显示悬停隐藏点击

Question

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

按钮悬停=示出和

格示出的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

尝试使用代替悬停

的jsfiddle的mouseenter：https://jsfiddle.net/toLt4tfg/1/

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

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