9

我创建了一个框，当鼠标悬停在另一个 div 上时，它会淡入另一个 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;
}
4

1 回答 1

15

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

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

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

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

或者：

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

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

<body ontouchstart="">
于 2013-04-23T23:35:24.960 回答