避免在鼠標懸停閃爍

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