CSS3 悬停/点击在移动浏览器中不起作用答案

【问题标题】：CSS3 hover/tap doesn't work in mobile browsersCSS3 悬停/点击在移动浏览器中不起作用
【发布时间】：2013-04-23 23:28:56
【问题描述】：

我创建了一个框，当鼠标悬停在另一个 div 上时它会淡出。这一切都是使用 CSS3 完成的。但是，我意识到的一个问题是悬停在移动浏览器中不起作用。有没有办法以某种方式使这项工作适用于移动设备，还是我必须求助于某种 JS？

编辑：为了澄清，我只想能够点击框并显示描述。我在其他网站上看到过。这通常是怎么做的？ :)

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

【问题讨论】：

移动浏览器没有悬停功能。他们还没有在没有触摸屏幕的情况下检测到你的手指在哪里；）
Cody 是对的，你需要想出另一种勾搭的姿势。
什么是移动设备上的悬停？大多数没有任何形式的光标，最低级别的位置指示器是点击。您可以添加一些 javascript 来触发点击而不是悬停在移动设备上。
我只是希望能够点击该框并显示说明。我在其他网站上看到过。这通常是怎么做的？ :)
根据我的经验，一旦用户按下一个元素，悬停就会被调用，他们通常必须再次按下才能真正点击它

标签： css

【解决方案1】：

在移动设备上无法进行悬停，因为没有持久光标 - 默认情况下上次触摸点的内存。

他们能够感知交互的唯一方法是 touch，这类似于单击或选择，因此 CSS 中的 :active 或 Javascript 中的 onclick 是目前您唯一的选择。

简单地说，你可以在 CSS 中定义它：

a.class:active {
  background-color: #AAA;
  ...
}

或者：

.class:active {
  background-color: #AAA;
  ...
}

但您需要使用以下变通方法（或 JS 事件：ontouchstart）来模拟点击：

<body ontouchstart="">

【讨论】：

谢谢。您能否向我展示一个如何在我的 JS Fiddle 示例中合并 :active 状态的示例？
@Desi 你想要纯 css 还是 jquery？
@Cody 我希望它可以是纯 CSS。
@Desi 您将需要使用复选框 hack 来纯粹使用 css 来完成。这将有助于点击
@nickhar 我尝试像这样添加:active：.project-mask:active .description，但它仍然无法在移动浏览器中运行。 jsfiddle.net/ygShH/7