将悬停更改为触摸答案

【问题标题】：Change hover to touch将悬停更改为触摸
【发布时间】：2018-10-01 13:51:20
【问题描述】：

我正在尝试使this effect 易于触摸。我有一个包含标题和描述的缩略图库。标题在加载时显示，当用户将鼠标悬停在缩略图上时，他们会看到更长的描述。然后他们可以单击整个图像以转到链接页面。

我尝试了几个选项，例如this one，但似乎都没有。如果悬停用作显示标题信息的触摸，我会很好，第二次触摸将打开分配给图像的链接。现在，第一次触摸会显示半秒钟的描述，然后点击链接。

我对 CSS 或 js 选项持开放态度——我只需要做点什么！

.caption {
    position: relative;
    overflow: hidden;

    /* Only the -webkit- prefix is required these days */
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}

.caption::before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    transition: background .35s ease-out;
}

.caption:hover::before {
    background: rgba(0, 0, 0, .5);
}

.caption__media {
    display: block;
    min-width: 100%;
    max-width: 100%;
    height: auto;
}

.caption__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    color: white;

    -webkit-transform: translateY(100%);
            transform: translateY(100%);

    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
}

.caption:hover .caption__overlay {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.caption__overlay__title {
    -webkit-transform: translateY( -webkit-calc(-100% - 10px) );
            transform: translateY( calc(-100% - 10px) );

    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
}

.caption:hover .caption__overlay__title {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

【问题讨论】：

据我了解，您可以将图像放在<a></a> 中，因此当他们将鼠标悬停时会显示文本，但当他们单击时会将其带到该页面。
我试过了，但是覆盖层覆盖了图像，然后您就无法点击链接。我希望叠加层覆盖图像并保持可点击状态，它现在就是这样做的。我在图像之前有并在 div 的末尾将其关闭。我只需要它在触摸时做到这一点。
所以当鼠标悬停在图片上时会显示文字！并且文本应该是可点击的？
是的，文本应该是可点击的。它在悬停时正常工作，但在触摸时不起作用。

标签： html css hover touch

【解决方案1】：

这可能就是你要找的。p>

.hvrbox,
.hvrbox * {
  box-sizing: border-box;
}

.hvrbox {
  position: relative;
  display: inline-block;
  overflow: hidden;
  max-width: 400px;
  height: auto;
}

.hvrbox img {
  max-width: 100%;
}

.hvrbox-text a {
  text-decoration: none;
  color: #ffffff;
  font-weight: 700;
  padding: 5px;
  border: 2px solid #ffffff;
}

.hvrbox .hvrbox-layer_bottom {
  display: block;
}

.hvrbox .hvrbox-layer_top {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 15px;
  -moz-transition: all 0.4s ease-in-out 0s;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -ms-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
  opacity: 1;
}

.hvrbox .hvrbox-text {
  text-align: center;
  font-size: 18px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.hvrbox .hvrbox-text_mobile {
  font-size: 15px;
  border-top: 1px solid rgb(179, 179, 179);
  /* for old browsers */
  border-top: 1px solid rgba(179, 179, 179, 0.7);
  margin-top: 5px;
  padding-top: 2px;
  display: none;
}

.hvrbox.active .hvrbox-text_mobile {
  display: block;
}

.hvrbox .hvrbox-layer_slideup {
  -moz-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}

.hvrbox:hover .hvrbox-layer_slideup,
.hvrbox.active .hvrbox-layer_slideup {
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

<div class="hvrbox">
  <img src="https://picsum.photos/5760/3840?image=1067" alt="Mountains" class="hvrbox-layer_bottom">
  <div class="hvrbox-layer_top hvrbox-layer_slideup">
    <div class="hvrbox-text"><a href="http://www.goolge.com">Take me to Goolge</a></div>
  </div>
</div>

【讨论】：