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

首先，downloadZepto.js。這是一個非常輕的圖書館，專注於移動瀏覽器。對於觸摸事件，您還需要包含在Zepto src文件夾中的Zepto模塊touch.js。

所以，我們需要的是這兩個文件：
+ zepto.js（精縮+ gzip壓縮：9.7k）
+ touch.js（非精縮/非gzip壓縮：4K）

的Zepto支持以下觸摸事件：

• tap - 點擊元素時觸發。
• singleTap和doubleTap - 這一對事件可以用來檢測同一元素上的單擊和雙擊（如果你不需要雙擊檢測，可以用tap來替代）。
• longTap - 觸發元素並且手指按住超過750ms時觸發。
• swipe，swipeLeft，swipeRight，swipeUp，swipeDown - 當一個元件被刷（任選地在給定的方向）火災

NEW CODE：

---

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

這種方法的好處是，你不必擔心對跨瀏覽器的兼容性，如果您將來需要更多的移動功能，則實施它們非常容易。