避免在鼠标悬停闪烁

Question

我试图用jQuery实现一个小的鼠标悬停效果，但我坚持解决一个闪烁的问题。我已经尝试过为mouseout插入一个延迟，但仍然有图像的麻烦。

有没有人有这方面的线索？

亲切的问候，萨沙

测试网址：www.de-facto-magazin.de

$(".item").hover(

function() { 
    $(this).parent().parent().find(".title").show(); 
    $(this).parent().parent().find(".bg").show(); 
    $(this).parent().parent().find(".bg").addClass("transparent"); 
    $(this).find(".bg").removeClass("transparent"); 
    $(this).find(".title").addClass("colored"); 
}, function() { 
    $(this).parent().parent().find(".title").hide(); 
    $(this).parent().parent().find(".bg").hide(); 
    $(this).parent().parent().find(".title").removeClass("colored"); 

})​ 

Answer 1

，避免闪烁，最好的办法是对封闭的div一个单独的悬停事件（ID =“扑通”）来处理显示/隐藏，并且仅使用当前事件来处理哪个div处于活动状态。沿着这些线（警告，代码未经测试）：

$("#splash").hover(
    function(){ 
     $(this).find(".title").show(); 
     $(this).find(".bg").show(); 
    },function(){ 
     $(this).find(".title").hide(); 
     $(this).find(".bg").hide(); 
    } 
); 

$(".item").hover(
    function(){ 
     $(this).parent().parent().find(".bg").addClass("transparent"); 
     $(this).find(".bg").removeClass("transparent"); 
     $(this).find(".title").addClass("colored"); 
    } 
);