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;
}

或者，您可以使用.bind()和事件名称（例如hover.showTease）和.unbind()在您的showall函数中绑定您的悬停事件。

Answer 2

你可以用这种方式取消绑定“悬停”：

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

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

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

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

Answer 3

var allShown = false;

function showAll(){
    //some imaginary code

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

这应该在DOM准备好的范围内。

$(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;
    });



});

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

3 个答案: