Question

我们假设我有一个.description类的div。

当用户使用div.description类悬停在另一个div上时，我希望显示.image。

但是，当用户点击div.image时，我希望div.description保持可见状态。因此，如果用户点击.image，则不应该应用mouseleave事件。

最后，当用户再次点击.image时，应再次激活悬停功能。因此，当鼠标离开.image1时，div.description将再次隐藏。

希望你们能帮助我！

Answer 1

var cancel = false;
$(".another").hover(function(){
    $("div.description").show();
},function(){
  if(!cancel)
  $("div.description").hide();
});

$(".image").click(function(){
  cancel = (cancel)?false: true;
});

Answer 2

你可以尝试这样的事情：http://jqversion.com/#!/CCvqpwh

$('.image').bind('mouseenter', function(){
    $('.description').show();
}).bind('mouseleave', function(){
    $('.description').hide();
}).click(function(){
  if (!$(this).hasClass('clicked')){
    $(this).addClass('clicked');
    $(this).unbind('mouseleave');
  } else {
    $(this).removeClass('clicked');
    $(this).bind('mouseleave', function(){
        $('.description').hide();
    })
  }
});

Answer 3

您可以将两个事件绑定到相同的元素，如bellow。并使用单独的函数来获得您想要的内容

var myFunction1 = function() {
   $('div.description').show();
}
var myFunction2 = function() {
  // do whatever you want
}
$('div.image')
    .click(myFunction1)
    .mouseover(myFunction2)

Answer 4

使用此脚本

   jQuery(document).ready(function() {
        jQuery('.overlay').hide();
    });
    jQuery(document).ready(function() {
        jQuery('.element, .element-1').hover(function() {
            jQuery('.overlay').show();
            },
        function() {
            jQuery('.overlay').hide();
            });
    });

Jquery：在悬停时显示/隐藏div。点击显示

4 个答案: