使用点击功能禁用jquery悬停功能

我们有一个画廊，当您将光标悬停在图像div上时，标题会淡入。下一步是添加一个显示所有标题的按钮，所以人们可以滚动和阅读，而不必在屏幕上运行光标。使用点击功能禁用jquery悬停功能

创建showall函数很容易，但是当光标经过任何照片时，悬停功能会触发并且该图像上的标题消失。

当showall处于活动状态时，是否有简单的方法让showall功能禁用悬停功能？

我们基本的jQuery代码是下面，.tease是标题：

$('.tease').hide(); 
$('.img33, .img40, .img50, .img60').hover(
    function(){ $(this).children('.tease').fadeIn('900'); }, 
    function(){ $(this).children('.tease').fadeOut('2500'); } 
);

每个图像的基本的html：

<div class="img33"> 
<img src="../dir/someimage.jpg"> 
<div class="tease">Tease copy</div> 
</div>

来源

2012-11-13 Tom

我可以看到你的'showall'方法的点击函数，所以我可以正确回答这个问题。 – Ohgodwhy

您可以定义一个全局变量，您在悬停函数中检查。

例如

var hoverEnabled = true; 

$('.tease').hide(); 
$('.img33, .img40, .img50, .img60').hover(
    function(){ if(hoverEnabled) $(this).children('.tease').fadeIn('900'); }, 
    function(){ if(hoverEnabled) $(this).children('.tease').fadeOut('2500'); } 
); 

$('#showAllButton').click(function() { 
    $('.tease').show(); 
    hoverEnabled = false; 
}

另外，您可以绑定在你的SHOWALL功能使用.bind()和事件名称（例如hover.showTease）和.unbind()它的悬停事件。

来源

2012-11-13 09:40:27 Ketola

谢谢，这对我们想要的是完美的。 – Tom

您可以取消绑定 “悬停” 是这样的：

$(this).unbind('mouseenter mouseleave');

只要您想禁用悬停，请执行此操作。或者，为了获得更好的控制权并不继续添加和删除事件，您可能需要引入一个添加和删除的类，并且只有在某些类设置为该元素时才执行悬停操作。像这样：

$(this).hover(
    function() { 
     if ($(".yourElement").hasClass("allowHover")) { 
      ... 
     } 
    }, 
    function() { 
     if ($(".yourElement").hasClass("allowHover")) { 
      ... 
     } 
    } 
);

然后只需添加或删除一个类，悬停将启用或禁用。

来源

2012-11-13 09:37:58

var allShown = false; 

function showAll(){ 
    //some imaginary code 

    //we're showing all 
    allShown = true; 
}

这应该是ni准备好的范围。

$(function(){ 
    $('.img33, .img40, .img50, .img60').hover(function(){ 
     if(allShown === false){ 
      $(this).children('.tease').fadeIn('900'); 
     } 
    },function(){ 
     if(allShown === false){ 
      $(this).children('.tease').fadeOut('2500'); 
     } 
    }); 

    $('ele').on('something', function(){ 
     //some code.. 
     allShown = false; 
    }); 

    //some event to fire the showAll function 
    $('ele').on('something', function(){ 
     showAll(); 
     allShown = true; 
    }); 



});

来源

2012-11-13 09:39:36 Ohgodwhy

使用点击功能禁用jquery悬停功能

回答

相关问题