更改悬停以触摸 [英] Change hover to touch

问题描述

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

I am trying to make this effect touch-friendly. I have a thumbnail gallery that has titles and descriptions. The title is displayed on load, and when the user hovers over the thumbnail they see the longer description. Then they can click on the entire image to go to the linked page.

我尝试了几种选择，例如这一个但似乎没有任何作用.如果悬停可以作为显示字幕信息的按钮，我会很好的，第二次触摸将打开分配给图像的链接.现在，第一次触摸会显示说明半秒钟，然后点击链接.

I have tried several options, like this one but none seem to work. I'd be fine if the hover acted as a touch to display caption info, and a second touch will open the link that is assigned to the image. Right now, the first touch displays the description for a half second, then follows the link.

我愿意接受CSS或js选项-我只需要做一些工作即可！

I'm open to CSS or js options- I just need to get something to work!

.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 * {
  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>

这篇关于更改悬停以触摸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！