Question

我希望在移动设备上启用触摸并在HTML元素上执行相同的效果（或类似的操作），然后将其悬停状态。

我有一张图片，在悬停时，会应用transformX（）的CSS3过渡。我想用移动设备实现同样的功能，但只需向左滑动（或点击它）。

这可能与CSS3 / HTML一起使用吗？如果没有，你建议使用哪个特定的jQuery touch库？

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

Answer 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}

如何使用CSS3悬停转换/转换效果在HTML元素上启用触摸幻灯片？

1 个答案: