如何使用 CSS3 悬停过渡/变换效果在 HTML 元素上启用触摸幻灯片？答案

【问题标题】：How can I enable touch slide on an HTML Element using CSS3 Hover transition/transform effects?如何使用 CSS3 悬停过渡/变换效果在 HTML 元素上启用触摸幻灯片？
【发布时间】：2014-06-25 07:09:28
【问题描述】：

我想在移动设备上启用触摸并携带相同的效果（或类似的东西），然后它是 HTML 元素上的悬停状态。

我有一个图像，在悬停时，应用了 transformX() 的 CSS3 过渡。我想用移动设备实现同样的效果，但只需向左滑动（或点击它）。

这可以通过 CSS3/HTML 实现吗？如果没有，你推荐使用哪个特定的 jQuery touch 库？

这是我的小提琴：http://jsfiddle.net/gT47d/12/

HTML

<a href="http://google.com" class="slide transform multi">
<img src="http://media02.hongkiat.com/fruits-vege-stock-photos/highres/orange-stock04.jpg" />

<div class="info">Fruit Info</div>  
</a>

CSS

a.slide{
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
}
.transform {
    overflow:hidden;
}
.info{
    color:#FFF;
    font-family: arial;
    position: absolute; 
    width: 100%; 
    padding: 10px; 
    top: 0px; 
    left: 0px; 
    background-color: rgba(0, 0, 0, 0.6);
}
.transform img {
    position: relative;
    z-index: 5;
    width: 100%;
    height: auto !important;
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

.transform:hover img {
    transform: translateX(90%);
    opacity: .4;
}
.multi{
    background: url(http://media02.hongkiat.com/fruits-vege-stock-photos/highres/fruitsvege-stock37.jpg); 
    background-size:cover;
}

【问题讨论】：

标签： jquery html css touch

【解决方案1】：

DEMO

使用:focus技巧可以实现一次录音。
我还将图像移到了锚点之外，这样录音就不会打开链接。

HTML：

<div class="slide transform multi">
    <img src="http://media02.hongkiat.com/fruits-vege-stock-photos/highres/orange-stock04.jpg" />
    <a href="http://google.com" class="">
        <div class="info">Fruit Info</div>
    </a>
</div>

CSS：

.transform {
  overflow:hidden;
  height: auto;
}
.info{
    color:#FFF;
    font-family: arial;
    position: absolute; 
    width: 100%; 
    padding: 10px; 
    top: 0px; 
    left: 0px; 
    background-color: rgba(0, 0, 0, 0.6);
}
.transform img {
    position: relative;
    z-index: 5;
    width: 100%;
    height: auto !important;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

.transform:hover img, .transform:focus img, .transform img:focus {
  transform: translateX(90%);
    opacity: .4;
}
.multi{background: url(http://media02.hongkiat.com/fruits-vege-stock-photos/highres/fruitsvege-stock37.jpg); background-size:cover}

【讨论】：

谢谢@Imran Bughio。不完全是我正在寻找的东西。在 iPhone/iPad 上测试时不起作用。