使用 Jquery 上传文件后禁用悬停效果

Question

我正在使用 hack 使文件上传输入在浏览器中显示相同。诀窍是基本上将上传输入的不透明度设置为零，并在其上方放置一个常规输入，并使用自定义样式。用户上传文件后，我使用 jquery 来获取文件名的值并将其存储在其上方的输入中（假输入）。

我的 Jquery 是：

    var browse = $("#browse");

    $('.wpcf7-file').on('change', function(){
            $('#fakeUpload').val(this.value).css({'background':'#f1f1f1', 'text-indent':'72px'});
            browse.css('backgroundPosition' , '5px -60px');
    });

    $("input.wpcf7-file").hover(function(){
        browse.css('backgroundPosition' , '5px -28px');
    }, function(){
        browse.css('backgroundPosition' , '5px 4px');
    });

如您所见，这里做了两件事：从 .wpcf7 输入中获取一个值并将其存储为 #fakeUpload 的值。 div, browse 或多或少是一个指示上传状态的按钮。用户选择文件后，浏览按钮进入非活动状态。

问题是用户进入这种“非活动状态”后，其下方的悬停效果仍然保持活动状态。使用上传文件后（更改输入）我想禁用所有悬停效果。解决此问题的最佳方法是什么？

如果您需要查看我的 html/css，请告诉我，但我认为这是一个非常简单的 jquery 问题。

Answer 1

在change 事件中，您可以向该字段添加一个类，如下所示：

     $('.wpcf7-file').on('change', function(){
        /// you code
        $(this).addClass('inactive');
     });

然后更改悬停选择器

    $("input.wpcf7-file:not('.inactive')").hover(function(){
        browse.css('backgroundPosition' , '5px -28px');
    }, function(){
        browse.css('backgroundPosition' , '5px 4px');
    });

Working sample

Answer 2

我认为这可能对你有用：

var browse = $("#browse");

$('.wpcf7-file').on('change', function(){
        $('#fakeUpload').val(this.value).css({'background':'#f1f1f1', 'text-indent':'72px'});
        browse.css('backgroundPosition' , '5px -60px');
        $("input.wpcf7-file").off("mouseenter ").off("mouseleave")
});

$("input.wpcf7-file").hover(function(){
    browse.css('backgroundPosition' , '5px -28px');
}, function(){
    browse.css('backgroundPosition' , '5px 4px');
});

Answer 3

尝试：

$("input.wpcf7-file").unbind('mouseenter mouseleave')