Удаление фонового изображения в фокусе ввода текста

У меня есть текстовое поле, как показано ниже:

 

И у меня есть соответствующий CSS для него:

 .username { background:#FFFFFF url(images/admin4.png) no-repeat; width: 256px; height: 24px } 

Теперь, когда пользователь нажимает на это текстовое поле, я хотел бы удалить изображение, и когда текстовое поле размывается, изображение возвращается назад.

Я пробовал что-то вроде ниже:

 $( document ).ready(function() { $('#fname').focus( function(){ $(this).css({'url' : ''}); }); 

но изображение остается там? Я попробовал оповещение в функции, и размытие, и фокус, кажется, работают нормально, но изображения просто не могут быть удалены?

Почему бы просто не использовать CSS?

 .username:focus { background-image: none; } 

jsFiddle демо здесь – http://jsfiddle.net/rp5hU/


В качестве альтернативы (если выше не работает), я бы попытался переключить class, например

 .username.focus { background-image: none; } 

и JS

 $('#fname').on({ 'focusin': function() { $(this).addClass('focus'); }, 'focusout': function() { $(this).removeClass('focus'); } }); 

Чтобы ответить на ваш вопрос, однако, причина, по которой он не работает, заключается в том, что аргументы для .css() должны быть

 ...css('backgroundImage', 'none') 

Попробуй это:

  $( document ).ready(function() { $('#fname').focusin( function(){ $(this).css('background-image', 'none'); }); $('#fname').focusout( function(){ $(this).css('background-image', 'url(images/admin4.png)'); }); });