Question

我正在尝试使用jquery实现一点鼠标悬停效果，但我无法解决一个闪烁的问题。我已经尝试为mouseout插入一个延迟，但我仍然遇到图像问题。

有人对此有所了解吗？

亲切的问候，Sascha

$(".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 =“splash”）上有一个单独的悬停事件来处理show / hide，并仅使用当前事件来处理哪个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");
    }
);

避免鼠标悬停时闪烁

1 个答案: