CSS3悬停效果不适用于移动浏览器

Question

我在我的网站上进行了以下设置。但是，当使用移动浏览器时，我无法在触摸/悬停时获得淡入淡出的描述。有没有办法可以改变下面的代码，以便在移动浏览器上有相同的行为？

JSFiddle：http://jsfiddle.net/CJNgb/

HTML

<article class="project">
  <div class="thumbnail view">
    <img src="http://lorempixel.com/output/people-q-c-292-292-9.jpg" />
    <section class="description">
      <hgroup>
        <h2>Title</h2>
        <h3>Identity, Illustration, Web</h3>
      </hgroup>
      <p>Description of project.</p>
      <a class="screenshot single-image" href="http://lorempixel.com/output/nightlife-q-c-700-700-4.jpg"></a>
        <span><a href="http://test.com" target="_blank">Visit website</a>   <a href="http://test.com/read-more">View more</a></span>
    </section>
  </div>
</article>

CSS

body {
color: #666;
font: 11px/1.5 helvetica,arial,sans-serif;
}
a { font-weight:bold;text-decoration:none }
.project {
background: #fff;
border: 1px solid #e5e5e5;
float: left;
height: 292px;
margin: 0 20px 20px 0;
overflow: hidden;
padding: 3px;
position: relative;
top: auto;
width: 292px;
}
.project .thumbnail {
   float: left;
   overflow: hidden;
   cursor: default;
   background: #f4f3f1;
    width:292px;
    height:292px;
}
.project .description {
   width: 252px;
   height:252px;
   position: absolute;
   top: 3px;
   left: 3px;
   padding:20px;
}
.project .description span a {
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 150ms;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 150ms;
background: #fff;
border: 1px solid #dedede;
color: #222 !important;
display: block;
float: left;
margin: 10px 10px 0 0;
padding: 10px 15px;
}
.screenshot {
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 150ms;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 150ms;
background: url("http://i.imgur.com/fEoN3s9.png") no-repeat scroll 0 0 transparent;
background-size: 37px 46px;
display: block;
height: 46px;
position: absolute;
right: 20px;
top: 20px;
width: 37px;
}
.thumbnail img {
   display: block;
   position: relative;
}
.thumbnail h2 {
   margin-bottom:5px;
   padding-bottom:0;
}
.project .description h3 {
   border-bottom:1px solid #dedede;
   color: #666;
   font-size:1em;
   margin-bottom: 15px;
   padding-bottom: 15px;
}
.project .description a {
   color: #ea641c;
}
.view img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view .description {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: #f4f3f1;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view hgroup {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view:hover .description {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view:hover hgroup,
.view:hover p,
.view:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}   

编辑：添加此行使这项工作在移动设备上！ document.addEventListener("touchstart", function() {},false);

Answer 1

您可以依赖此JavaScript解决方案：

Zepto

View JsFiddle
View Live Demo

首先，download Zepto.js。它是一个非常轻的库，专注于移动浏览器。对于触摸事件，您还需要包含在Zepto touch.js文件夹中的Zepto模块src。

所以我们需要的是这两个文件：
+ zepto.js（缩小+ gzipped：9.7k）
+ touch.js（非缩小/非缩放：4k）

Zepto支持以下触摸事件：

• tap - 点击元素时会触发。
• singleTap和doubleTap - 这对事件可用于检测同一元素上的单击和双击（如果您不需要双击检测，请使用点按）。 / LI>
• longTap - 点击一个元素并按住手指超过750毫秒时会触发。
• swipe，swipeLeft，swipeRight，swipeUp，swipeDown - 在刷新元素时触发（可选择在指定方向）

新代码：

---

<强> HTML / JS

<body>
<article class="project">
  <div class="thumbnail view">
    <img src="http://lorempixel.com/output/people-q-c-292-292-9.jpg" />
    <section class="description">
      <hgroup>
        <h2>Title</h2>
        <h3>Identity, Illustration, Web</h3>
      </hgroup>
      <p>Description of project.</p>
      <a class="screenshot single-image" href="http://lorempixel.com/output/nightlife-q-c-700-700-4.jpg"></a>
        <span><a href="http://test.com" target="_blank">Visit website</a>   <a href="http://test.com/read-more">View more</a></span>
    </section>
  </div>
</article>

<script src="zepto.js"></script>
<script src="touch.js"></script>
<script>
$('.view').tap(function(){
    if( $(this).hasClass('view-tap') ) {
        $(this).removeClass('view-tap')
    } else {
        $(this).addClass('view-tap')
    }
})

// Prevent any link click, when tap on image
$('.view a').on('click', function(e) {
    if( !$('.view').hasClass('view-tap') ) {
        e.preventDefault()
    }
})
</script>
</body>

---

CSS （仅替换部分：在.view-tap旁边添加了.view:hover）

.view:hover img, .view-tap img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view:hover .description, .view-tap .description {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view:hover hgroup, .view-tap hgroup,
.view:hover p, .view-tap p,
.view:hover a.info, .view-tap a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view:hover p, .view-tap p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view:hover a.info, .view-tap a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}

这种方法的优点是您不必担心跨浏览器兼容性，如果将来需要更多移动功能，只需轻松实现它们。