将悬停更改为触摸

2022-01-22 00:00:00 hover html css touch

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

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

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

.caption {位置:相对；溢出:隐藏；/* 现在只需要 -webkit- 前缀 */-webkit-transform: translateZ(0);变换:translateZ(0)；}.caption::before {内容: ' ';位置:绝对；顶部:0；右:0；底部:0；左:0；背景:透明；过渡:背景 .35s 缓出；}.caption:hover::before {背景:rgba(0, 0, 0, .5);}.caption__media {显示:块；最小宽度:100%；最大宽度:100%；高度:自动；}.caption__overlay {位置:绝对；顶部:0；右:0；底部:0；左:0；填充:10px；白颜色;-webkit-transform: translateY(100%);变换:translateY(100%)；过渡:-webkit-transform .35s 缓出；过渡:变换 .35s 缓出；}.caption: 悬停 .caption__overlay {-webkit-transform: translateY(0);变换:translateY(0)；}.caption__overlay__title {-webkit-transform: translateY(-webkit-calc(-100% - 10px));变换:translateY(计算(-100% - 10px))；过渡:-webkit-transform .35s 缓出；过渡:变换 .35s 缓出；}.caption: 悬停 .caption__overlay__title {-webkit-transform: translateY(0);变换:translateY(0)；}

解决方案

这可能就是你要找的.

.hvrbox,.hvrbox * {box-sizing:边框框；}.hvrbox {位置:相对；显示:内联块；溢出:隐藏；最大宽度:400px；高度:自动；}.hvrbox img {最大宽度:100%；}.hvrbox-文本一个{文字装饰:无；颜色:#ffffff；字体粗细:700；填充:5px；边框:2px 实心#ffffff；}.hvrbox .hvrbox-layer_bottom {显示:块；}.hvrbox .hvrbox-layer_top {不透明度:0；位置:绝对；顶部:0；左:0；右:0；底部:0；宽度:100%；高度:100%；背景:rgba(0, 0, 0, 0.6);颜色:#fff;填充:15px；-moz-transition:所有 0.4s 缓入出 0s；-webkit-transition:所有 0.4s 缓进出 0；-ms-transition:所有 0.4s 缓入出 0s；过渡:所有 0.4s 缓入缓出 0s；}.hvrbox:悬停 .hvrbox-layer_top，.hvrbox.active .hvrbox-layer_top {不透明度:1；}.hvrbox .hvrbox-文本 {文本对齐:居中；字体大小:18px；显示:内联块；位置:绝对；最高:50%；左:50%；-moz 转换:翻译(-50%，-50%)；-webkit-transform: 翻译(-50%, -50%);-ms-transform: 翻译(-50%, -50%);变换:翻译(-50%，-50%)；}.hvrbox .hvrbox-text_mobile {字体大小:15px；边框顶部:1px 纯色 rgb(179, 179, 179);/* 对于旧浏览器 */边框顶部:1px 实心 rgba(179, 179, 179, 0.7);边距顶部:5px；填充顶部:2px；显示:无；}.hvrbox.active .hvrbox-text_mobile {显示:块；}.hvrbox .hvrbox-layer_slideup {-moz 变换:翻译 Y(100%)；-webkit-transform: translateY(100%);-ms-transform: translateY(100%);变换:translateY(100%)；}.hvrbox:悬停 .hvrbox-layer_slideup，.hvrbox.active .hvrbox-layer_slideup {-moz-transform: translateY(0);-webkit-transform: translateY(0);-ms-transform: translateY(0);变换: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">带我去 Goolge</a></div></div></div>

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.

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

解决方案

This is probably what you're looking for.

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

相关文章