텍스트 입력 포커스

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 데모 - (위에서 작동하지 않는 경우), I 클래스를 전환하려고 할 것이다 또는 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') 

Answer 2

이 시도해야한다는 것입니다 :

$(document).ready(function() { 
     $('#fname').focusin(
     function(){ 
     $(this).css('background-image', 'none'); 
    }); 

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

});