Question

您好我正在尝试将焦点设置为选中按钮。我遇到的问题是，当我在按钮的背景图像中添加焦点颜色时，图像周围没有显示，但如果我删除图像，按钮效果很好。如何在有焦点的情况下在按钮周围放置边框并将其重置为模糊状态？

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

Answer 1

您可以在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');
     }); 
});

将焦点设置为选项卡上的按钮

1 个答案: