Question

I am using a hack to make a file upload input display the same across browsers. The trick is to basically set the opacity of the upload input to zero, and position a regular input overtop of it, with custom styling. After the user uploads a file, I am using jquery to grab the value of the filename and to store it in the input that is above it (the fake input).

My Jquery is:

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

As you can see, there are two things being done here: taking a value from the .wpcf7 input and storing it as the value of #fakeUpload. The div, browse is more or less a button that indicated the status of the upload. After the user selects the file, the browse button goes to an inactive state.

The problem is after the user goes to this “inactive state”, the hover effect below it still remains active. After the use uploads the file (on change of input) I want to disable all hover effects. What is the best way to go about this?

If you need to see my html/css let me know, but I figured it is pretty straightforward jquery question.

Answer 1

I think this may work for you:

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