使用Jquery上傳文件後禁用懸停效果

我正在使用hack使文件上傳輸入在各瀏覽器中顯示相同。訣竅是基本上將上傳輸入的不透明度設置爲零，並使用自定義樣式定位常規輸入。在用戶上傳文件後，我使用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，瀏覽或多或少是一個表示上傳狀態的按鈕。在用戶選擇文件後，瀏覽按鈕進入非活動狀態。

問題出在用戶轉到「非活動狀態」後，其下方的懸停效果仍然保持活動狀態。使用後上傳文件（在更改輸入時）我想禁用所有懸停效果。什麼是最好的方式去做這件事？

如果你需要看到我的HTML/CSS讓我知道，但我覺得這是非常簡單的jQuery問題。

來源

2012-06-01 JCHASE11

你使用'disable'屬性來實現非活動狀態嗎？ – thecodeparadox

不活動狀態只是一個使用精靈的不同圖像... – JCHASE11

我認爲這可能適合你：

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

來源

2012-06-01 13:54:44 mawcsco

完美謝謝！ – JCHASE11

在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

來源

2012-06-01 13:45:48 thecodeparadox

因爲這是一個黑客，它不是一個真正的按鈕或輸入。「按鈕」或多或少是#browse的背景圖片。所以啓用/禁用wouldnt工作我不認爲 – JCHASE11

加上這一起禁用懸停效應一起 – JCHASE11

@ JCHASE11檢查我的更新 – thecodeparadox

嘗試：

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

來源

2012-06-01 13:46:29 arieljuod

林不知道我將如何使用此....作爲回調改變事件？或者如何？ – JCHASE11

像mawcsco寫道，你必須在你的代碼後面的變化事件中做到這一點，小心這個「$（」input.wpcf7-file「）。off（」mouseenter「）.off（」mouseleave「）」這只是支持jQuery 1.7，如果你有一個較老的jQuery版本，請使用unbind – arieljuod

我有一個jquery的更新版本，爲了時間的緣故，我會選擇一個適用於我的版本！謝謝！感謝您的幫助 – JCHASE11

使用Jquery上傳文件後禁用懸停效果

回答

相關問題