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

我正在使用黑客技术使文件上传输入在浏览器中显示相同的内容。诀窍是基本上将上传输入的不透明度设置为零，并使用自定义样式将常规输入置于其上方。用户上传文件后，我使用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问题。

在

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

试试：

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

---

我认为这可能对你有用：

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

---

您是否使用

disable

属性实现非活动状态？否非活动状态只是使用精灵的不同图像…因为这是一种黑客行为，而不是实际的按钮或输入。“按钮”或多或少是“浏览”的背景图像。所以启用/禁用不起作用，我不认为这会同时禁用悬停效果是的，我明白你的意思了。目前，您的代码仍然显示悬停效果。具有wpcf7文件类的输入也将被分配为非活动类。这在这个实例中行吗？@JCHASE11 demo运行得很好，

$（

不够好，我不确定如何使用它…作为对on change事件的回调？或者怎么做？就像mawcsco所写的那样，您必须在代码之后的更改事件中这样做，小心使用仅在jQuery1.7上支持的“$（“input.wpcf7文件”）.off（“mouseenter”）.off（“mouseleave”）”，如果您使用的是较旧的jQuery版本，请使用unbindI更新的jQuery版本，并且为了时间起见，我会选择一个适合我的！谢谢你的帮助