タッチスクリーンでタップしてホバーキャプションを操作する方法

-1

ちょうどCSSを使用してサムネイルが表示されたときに、タイトルがスライドして表示されるギャラリーを作成しました。これは、ボタンがタッチされて保持されている場合は、タイトルが表示されますタッチスクリーン上の作品の並べ替え。タップでタイトルが表示され、2番目のタップがギャラリーに入るようにしたいと思います。私はあらゆる種類のjQueryコードを試しましたが、何も2番目のタップを有効にするものはありません。また、ギャラリーに入る前にタイトルを読むのが2〜2時間遅れてタップされたかどうかは気にしません。私はjavascriptとこのサイトに新しいので、私はこれを正しく尋ねないと謝罪します。ご協力いただきありがとうございます！ここでタッチスクリーンでタップしてホバーキャプションを操作する方法

は私のコードです：

<head> 
    <script src="js/jquery-1.12.0.min.js"></script> 
    <script type="text/javascript"> 
    $("target").click(function(){ $(this).toggleClass("titleBox"); }); 
    </script> 
</head> 

<body ontouchstart="" class="no-touch"> 
<div class="wrap"> 

<!-- Define all of the tiles: --> 

<div class="box"> 
<div class="boxInner"> 
    <a href="buildings/colorclock.html"> 
    <img src="images/buildings/thumbs/06.jpg" alt="Color Clock House"> 
    <div class="titleBox">Color Clock House</div> 
    </a> 
    </div> 
</div> 
<div class="box"> 
    <div class="boxInner"> 
    <a href="buildings/treetriangle.html"> 
    <img src="images/buildings/thumbs/07.jpg" alt="Tree Triangle House"> 
    <div class="titleBox">Tree Triangle House</div> 
    </a> 
    </div> 
</div> 
</div> 
</body> 

<style type="text/css"> 
    body { 
    margin: 0; 
    padding: 0; 
    } 

.wrap { 
    overflow: hidden; 
    margin: auto; 
    padding: 0 10%; 
    margin-top: 40px; 
} 

.box { 
    float: left; 
    position: relative; 
    width: 20%; 
    padding-bottom: 20%; 
} 

.boxInner { 
    position: absolute; 
    left: 20px; 
    right: 20px; 
    top: 20px; 
    bottom: 20px; 
    overflow: hidden; 
} 

.boxInner img { 
    width: 100%; 
} 

.boxInner .titleBox { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin-bottom: -50px; 
    font-size: .9em; 
    background: #fff; 
    background-size: 105%; 
    color: #A59E97; 
    padding: 5px; 
    text-align: center; 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
} 


body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox { 
    margin-bottom: 0; 
} 

.boxInner:focus { 
    cursor: pointer; 
    }

出典

2016-04-07 RebT

私はあなたの質問に似て**何らかの形で**答えました。 http://stackoverflow.com/questions/36439255/jquery-triggering-fadein-and-fadeout-on-menu/36439437#36439437を確認してください –

私は最終的に、一回クリックを解決ホバーをアクティブに、タッチスクリーン上でリンクを開くために二回クリックすることができました。もし誰かがここにコードに興味があれば、そうです。

jQuery(function($) { 
     $('.boxInner').on("touchstart", function (e) { 
      'use strict'; //satisfy code inspectors 
      var link = $(this); //preselect the link 
      if (link.hasClass('hover')) { 
       return true; 
      } else { 
       link.addClass('hover'); 
       $('a.taphover').not(this).removeClass('hover'); 
       e.preventDefault(); 
       return false; 
      } 
     });

出典

2016-04-09 21:40:28 RebT

タッチスクリーンでタップしてホバーキャプションを操作する方法

答えて

関連する問題