Question

我使用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;
  }

Answer 1

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

del(im)

如何使悬停字幕在触摸屏上轻敲

1 个答案: