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

发布于 2024-12-29 04:22:37 字数 727 浏览 1 评论 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>

原文

Hi I am trying to set focus to a button when it is tabbed to. The problem I am having is that when i add in the background image for the button the focus color is not being shown around the image but if I remove the image the button works great. How can I put a border around the button when it has focus and reset it on blur?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

红玫瑰 2025-01-05 04:22:37

您可以在 css 类中定义这些样式，然后在 focus 上应用该类，并在 blur 上删除它。试试这个。

从 button Css 中删除内联样式

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

（根据需要定义样式）

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

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

You can have these styles defined in a css class and then apply the class on focus and remove it on blur. Try this.

Remove the inline styling from button

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

Css (define the styles as per your need)

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

$(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 原文

~没有更多了~