Html 将悬停更改为触摸

我正在努力使接触友好。我有一个有标题和描述的缩略图库。加载时会显示标题，当用户将鼠标悬停在缩略图上时，他们会看到较长的描述。然后，他们可以点击整个图像进入链接页面

我尝试过几种选择，例如，但似乎都不起作用。如果将鼠标悬停作为一个触摸来显示标题信息，第二次触摸将打开分配给图像的链接，我会很好。现在，第一次触摸显示描述半秒钟，然后跟随链接

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

---

这可能就是你要找的

.hvrbox，
.hvrbox*{
框大小：边框框；
}
.hvrbox{
位置：相对位置；
显示：内联块；
溢出：隐藏；
最大宽度：400px；
高度：自动；
}
.hvrbox img{
最大宽度：100%；
}
.hvrbox文本a{
文字装饰：无；
颜色：#ffffff；
字号：700；
填充物：5px；
边框：2个实心#ffffff；
}
.hvrbox.hvrbox-layer_底部{
显示：块；
}
.hvrbox.hvrbox-layer\u顶部{
不透明度：0；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.6）；
颜色：#fff；
填充：15px；
-moz转换：所有0.4都可以轻松地输入输出0；
-webkit过渡：所有0.4s都易于输入输出0；
-ms转换：所有0.4s易于输入输出0s；
过渡：所有0.4s均为0进0出；
}
.hvrbox:hover.hvrbox-layer_top，
.hvrbox.active.hvrbox-layer_-top{
不透明度：1；
}
.hvrbox.hvrbox文本{
文本对齐：居中；
字号：18px；
显示：内联块；
位置：绝对位置；
最高：50%；
左：50%；
-moz变换：平移（-50%，-50%）；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
.hvrbox.hvrbox-text_mobile{
字体大小：15px；
边框顶部：1px实心rgb（179179179179）；
/*对于旧浏览器*/
边框顶部：1px实心rgba（1791791790.7）；
边缘顶部：5px；
垫顶：2件；
显示：无；
}
.hvrbox.active.hvrbox-text_mobile{
显示：块；
}
.hvrbox.hvrbox-layer\u slideup{
-moz变换：translateY（100%）；
-webkit转换：translateY（100%）；
-ms转换：translateY（100%）；
转化：translateY（100%）；
}
.hvrbox:hover.hvrbox-layer\u slideup，
.hvrbox.active.hvrbox-layer\u slideup{
-moz变换：translateY（0）；
-webkit转换：translateY（0）；
-ms变换：translateY（0）；
变换：translateY（0）；
}

据我所知，你可以在

中使用图像，因此当他们悬停时，它会显示文本，但当他们单击时，它会将他们带到该页面。我尝试过，但覆盖层会覆盖图像，然后你就无法跟踪链接。我想覆盖图像，并保持可点击，它现在这样做。我在图像之前有一个图标，并在div末尾将其关闭。我只需要在触摸时使用它就可以了。所以当鼠标悬停在图像上时，文本就会显示出来！文本应该是可点击的？是的，文本应该是可点击的。它在悬停时正常工作，但在触摸时不工作。