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

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

但图像仍然存在？我试过 alert 功能，模糊和聚焦似乎都可以正常工作，但图像就是无法删除？

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