jquery - 使用单击功能禁用 jquery 悬停功能

Question

我们有一个画廊，当您将光标悬停在图像 div 上时，其标题会淡出。我们的下一步是添加一个显示所有标题的按钮，这样人们就可以滚动和阅读，而无需将光标遍布屏幕。

创建 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>

Answer 1

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

例如

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() 绑定(bind)悬停事件。