установить фокус на кнопку на вкладке - PullRequest
Новая
       26

установить фокус на кнопку на вкладке

0 голосов
/ 26 января 2012

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

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

1 Ответ

1 голос
/ 26 января 2012

Вы можете определить эти стили в классе css, а затем применить класс к focus и удалить его к blur.Попробуйте это.

Удалите встроенный стиль из button

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

Css (определите стили в соответствии с вашими потребностями) 

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