CSS3悬停/点按在移动浏览器中不起作用 [英] CSS3 hover/tap doesn't work in mobile browsers
问题描述
我创建了一个框，当悬停在其上时，它会淡入另一个div。这一切都使用CSS3。然而，我意识到的一个问题是悬停在移动浏览器中不工作。有没有办法以某种方式使这项工作为手机，或者我不得不求助于使用某种JS？
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?
编辑：澄清，我只是想点击框和有描述显示。我在其他网站上看到了。这通常是怎么做的？ ：）
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小提琴： http：// jsfiddle。 net / ygShH / 4 /
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
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;
}
推荐答案
他们可以感觉到交互的唯一方式是 > touch （类似于点击或选择），因此：active 在CSS或 onclick
The only way they can sense interaction is touch, which is akin to a click or selection, so :active in CSS or onclick in Javascript are your only options currently.
简单来说，在CSS中你可以定义它：
Simplistically, in CSS you can define it:
a.class:active {
background-color: #AAA;
...
}
或：
.class:active {
background-color: #AAA;
...
}
但您需要使用以下解决方法或JS事件： ontouchstart ）以模仿点击：
But you need to use the following workaround (or JS events: ontouchstart) to mimic the click:
<body ontouchstart="">
这篇关于CSS3悬停/点按在移动浏览器中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
