触摸启动时显示为灰色的表单按钮

Grey out form button on touch start

本文关键字:表单 按钮 灰色 启动 显示 触摸      更新时间:2023-09-26

我有一个带有背景的"按钮"类型的输入,想知道如何通过javascript使背景变灰。它的 css 如下所示:

background:url(../img/cameraPic.png) no-repeat center;

当有人触摸它时,我希望它在按住它时通过变灰来做出反应。这样一个函数的骨架看起来像这样,但我不确定当它有背景时如何更改颜色。

 $("#myButton").bind('touchstart', function(e){
     //...What to put here?      
 });

有人有什么想法吗?我应该使用 grayscale() css 属性还是只是制作一个新图像并在每次按下新图像时用新图像替换背景?

像这样的东西?例

 $("button").bind('touchstart', function(e){
   e.preventDefault();
   $(this).css({
     'background-color':'grey',
     opacity:0.3
   });
 });
$("button").bind('touchend', function(e){
   $(this).css({
     'background-color':'transparent',
     opacity:1
   });
 });