全58行のhtmlのプログラム修正、タップ処理の実装

###前提・実現したいこと

・全58行のhtmlのプログラム修正。

・javaScriptとCSSで、ボタンのクリック/タップを作っています。
 PCは動くのですが、タブレットは動きません。
 →PCは、CSSのhoverで動作することまで、理解しました。

###発生している問題・エラーメッセージ

・タブレットでタップの動きがおかしい。
 ボタンを押した状態のままになってしまいます。

###該当のソースコード

<!DOCTYPE html>
<html>
   <head>
      <style type="text/css"></style>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
         <!--
            body{
            background: #1D1F20;
            }
            p{
            color: #fff;
            }
            
            .btn {
            float:left;            
            width:19%;
            margin:0 1% 1.5% 0;
            height: 80px;
            font-size:1.5em;
            position:relative;
            display:block;
            outline: none;
            border: 0;
            padding:5px;
            color:#fff;
            border-radius:3px;
            text-align:center;
            text-decoration: none;
            text-shadow:1px 1px 0 rgba(255,255,255,0.3);
            /* gray */        
            background:#a9a9a9;
            box-shadow:0 5px 0 #696969;                
            }
            .btn:hover{        
            -webkit-transform: translate3d(0px, 5px, 1px);
            -moz-transform: translate3d(0px, 5px, 1px);
            transform: translate3d(0px, 5px, 1px);
            box-shadow:none;
            /* gray */        
            background:#696969;        
            }
            .btn:active{
            padding-top:6px;
            padding-bottom:4px;
            }             
            
            -->
      </style>
   </head>
   <body>
      <div>
         <button type="submit" class="btn" name="ボタン" id="btn1" >
            ボタン
         </button>
      </div>
   </body>

###試したこと
・以下をまねて、組み込みました。
検索「hover タップ」
・超簡単！スマホサイトでもタッチでhoverが効くようにする方法 | 渡邉充敏 ...
https://watanabemitsutoshi.com/smp-touch-hover-js

・スマホで触れている間だけhoverする - Qiita
http://qiita.com/RinoTsuka/items/8992cc127d42af13cc4f

###課題に対してアプローチしたことを記載してください
→ タブレットは、JQueryや、javaScriptで処理を書くそうなのですが、
できません。理想は、JQueryを使わず、javaScriptの実装です。

目標は、実装ですので、JQueryを用いる方法をご存じの場合は、
JQueryありのソースの修正箇所を教えて頂きたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

css
1            .btn:hover{        
2            -webkit-transform: translate3d(0px, 5px, 1px);
3            -moz-transform: translate3d(0px, 5px, 1px);
4            transform: translate3d(0px, 5px, 1px);
5            box-shadow:none;
6            /* gray */        
7            background:#696969;        
8            }

の代わりに

JavaScript
1      $(function () {
2        $(".btnjq").hover(
3            function () {
4                $(this).css("background","#696969")
5                .css("box-shadow","none")
6                .css("transform","translate3d(0px, 5px, 1px)");
7              },
8              function () {
9                $(this).css("background","#a9a9a9")
10                .css("box-shadow","1px 1px 0 rgba(255,255,255,0.3)");
11
12              }
13          );
14      });