Javascript 如何使悬停字幕在轻触触摸屏时工作_Javascript_Jquery

Javascript 如何使悬停字幕在轻触触摸屏时工作

javascript jquery

Javascript 如何使悬停字幕在轻触触摸屏时工作,javascript,jquery,Javascript,Jquery,我使用CSS创建了一个图库，当缩略图悬停在上面时，标题会滑入视图。它可以在触摸屏上工作，如果按住按钮，标题就会出现。我想让它，使一个点击带来的标题和第二个点击进入画廊。我尝试了各种jQuery代码，但似乎没有任何东西能够启用第二次点击。我也不介意在进入画廊之前，只需轻轻一点，延迟一两秒钟阅读标题。我是javascript和这个网站的新手，如果我问得不好，我很抱歉。谢谢你的帮助这是我的密码： <head> <script src="js/jquery-1.12.0.min.

我使用CSS创建了一个图库，当缩略图悬停在上面时，标题会滑入视图。它可以在触摸屏上工作，如果按住按钮，标题就会出现。我想让它，使一个点击带来的标题和第二个点击进入画廊。我尝试了各种jQuery代码，但似乎没有任何东西能够启用第二次点击。我也不介意在进入画廊之前，只需轻轻一点，延迟一两秒钟阅读标题。我是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;
  }


$（“目标”）。单击（函数（）{$（this）.toggleClass（“标题框”）；}）；
身体{
保证金：0；
填充：0；
}
.包裹{
溢出：隐藏；
保证金：自动；
填充：0.10%；
边缘顶端：40px；
}
.盒子{
浮动：左；
位置：相对位置；
宽度：20%；
垫底：20%；
}
伯森尔先生{
位置：绝对位置；
左：20px；
右：20px；
顶部：20px；
底部：20px；
溢出：隐藏；
}
.boxInner img{
宽度：100%；
}
.boxInner.titleBox{
位置：绝对位置；
底部：0；
左：0；
右：0；
边缘底部：-50px；
字体大小：.9em；
背景：#fff；
背景大小：105%；
颜色：#A59E97；
填充物：5px；
文本对齐：居中；
-webkit过渡：所有0.3版本都可以轻松过渡；
-moz转换：所有0.3秒都会变慢；
-o型过渡：所有0.3秒都会变缓；
过渡：所有0.3秒放松；
}
body.no-touch.boxInner:hover.titleBox，body.touch.boxInner.touchFocus.titleBox{
页边距底部：0；
}
.boxInner:聚焦{
光标：指针；
}

我终于能够解决单击一次、激活悬停、单击两次在触摸屏上打开链接的问题。如果有人对这里的代码感兴趣，它就是

 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; 
          }
      });

我的回答与你的问题有些相似。检查