CSS CSS3 悬停/点击在移动浏览器中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16180892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 hover/tap doesn't work in mobile browsers
提问by J82
I created a box that fades into another div when hovered over. This was all done using CSS3. However, one problem I realized was that the hovers don't work in mobile browsers. Is there a way to somehow make this work for mobile or do I have to resort to using some sort of JS?
我创建了一个盒子，当鼠标悬停在另一个 div 上时它会淡入淡出。这一切都是使用 CSS3 完成的。然而，我意识到的一个问题是悬停在移动浏览器中不起作用。有没有办法以某种方式使这项工作适用于移动设备，还是我必须求助于使用某种 JS？
EDIT: To clarify, I just want to be able to tap the box and have the description show. I've seen it on other websites. How is this usually done? :)
编辑：为了澄清，我只想能够点击该框并显示说明。我在其他网站上看到过。这通常是如何完成的？:)
JS Fiddle: http://jsfiddle.net/ygShH/4/
JS小提琴：http: //jsfiddle.net/ygShH/4/
HTML
HTML
<article class="project">
<div class="project-mask">
<div class="thumbnail">
<img src="http://dummyimage.com/292x292/000/fff" alt="desc" height="260" width="260">
<div class="description">
<hgroup>
<h2>Title</h2>
<h3>Web</h3>
</hgroup>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<span>
<a href="http://site.com" target="_blank">Visit website</a> <a href="/view-project">View project</a>
</span>
</div>
</div>
</div>
</article>
CSS
CSS
body {
background:#f4f3f1;
color:#666;
font:62.5%/1.6 Helvetica, Arial, Sans-serif;
}
p {
font-size:1.1em;
margin:0 0 1em;
}
h1,h2,h3 {
color:#222;
font-weight:400;
}
h2 {
font-size:1.5em;
margin-top:0;
}
h3 {
font-size:1.1em;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,input,textarea {
display:block;
}
.project {
background:#fff;
float:left;
height:260px;
overflow:hidden;
width:260px;
margin:0 20px 20px 0;
padding:20px;
}
.project-mask {
height:260px;
position:relative;
width:260px;
}
.project-mask .description {
-moz-transition:.3s ease-in-out opacity;
-o-transition:.3s ease-in-out opacity;
-webkit-transition:.3s ease-in-out opacity;
transition:.3s ease-in-out opacity;
background:#f4f3f1;
display:block;
height:220px;
left:0;
opacity:0;
position:absolute;
top:0;
width:220px;
padding:20px;
}
.project-mask:hover .description {
opacity:1;
}
.project-mask .description h2 {
margin-bottom:5px;
}
.project-mask .description h3 {
border-bottom:1px solid #ddd;
color:#777;
margin-bottom:10px;
padding-bottom:10px;
}
回答by nickhar
Hovers aren't possible on mobile devices as there is no persistent cursor - memory of the last touched pointby default.
移动设备上无法悬停，因为没有持久光标 -默认情况下最后触摸点的内存。
The only way they can sense interaction is touch, which is akin to a click or selection, so :activein CSS or onclickin Javascript are your only options currently.
他们感知交互的唯一方式是触摸，这类似于单击或选择，因此:active在 CSS 或onclickJavascript 中是您目前唯一的选择。
Simplistically, in CSS you can define it:
简单地说，在 CSS 中你可以定义它：
a.class:active {
background-color: #AAA;
...
}
Or:
或者：
.class:active {
background-color: #AAA;
...
}
But you need to use the following workaround (or JS events: ontouchstart) to mimic the click:
但是您需要使用以下解决方法（或 JS 事件：ontouchstart）来模拟点击：
<body ontouchstart="">
