2012-01-26 2 views
0

안녕하세요, 탭으로 이동할 때 단추에 포커스를 설정하려고합니다. 내가 가지고있는 문제는 버튼의 배경 이미지를 추가 할 때 포커스 색상이 이미지 주위에 표시되지 않지만 이미지를 제거하면 버튼이 잘 작동한다는 것입니다. 포커스가있을 때 버튼 주위에 테두리를 넣고 흐리게 처리하면 어떻게 재설정합니까?탭의 단추에 포커스를 설정하십시오.

<html> 
<head> 

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 


<script type="text/javascript"> 

$(document).ready(function() { 
    $('button:button').focus(function(){ 
    $(this).css({'background-color' : 'red'}); 
    }); 
    $('button:button').blur(function(){ 
    $(this).css({'background-color' : 'lightgreen'}); 
    }); 
}); 
</script> 


</head> 
<body> 
    <button type='button' id='btnSubmit' style="background-image:  
    urlbuttonBackground.gif);"  >button</button> 
</body> 
</html> 
+0

jQuery를 1.3 (당신의 필요에 따라, 스타일을 정의) button

<button type='button' id='btnSubmit'>button</button> 

CSS는에서 인라인 스타일을 제거? 꽤 예쁘다. – ThiefMaster

답변

1

당신은 CSS 클래스에 정의 된 이러한 스타일을하고 focus에 클래스를 적용하고 blur에 제거 할 수 있습니다. 이 시도.

button{ 
    background: lightgreen; 
} 
.focusBg{ 
    background: ulr('urlbuttonBackground.gif'); 
    border: 1px solid red; 
} 

JS

$(document).ready(function() { 
    //Since the button has an id, you can use id selector 
    $('#btnSubmit').focus(function(){ 
      $(this).addClass('focusBg'); 
    }).blur(function(){ 
      $(this).removeClass('focusBg'); 
    }); 
}); 
+0

고마워요. –