删除文本输入焦点上的背景图像

Question

我有一个文本框，如下所示：

<input type="text" name="fname" class="username" id="fname">

我有相应的 CSS：

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

现在当用户点击这个文本框时，我想删除图像，当文本框模糊时，图像显示回来。

我试过如下：

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

但图像仍然存在？我在功能中尝试过警报，模糊和焦点似乎都可以正常工作，但图像无法删除？

Answer 1

为什么不纯粹使用 CSS？

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

jsFiddle 演示在这里 - http://jsfiddle.net/rp5hU/

或者（如果上述方法不起作用），我会尝试切换一个类，例如

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

和 JS

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

但是，要直接回答您的问题，它不起作用的原因是参数.css()应该是

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