我创建了一个盒子,当它盘旋时会逐渐消失.这都是使用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;
}
nic*_*har 11
在移动设备上无法进行悬停,因为没有持久性光标 - 默认情况下最后一个触摸点的内存.
他们可以感知互动的唯一方式是触摸,这类似于点击或选择,因此:active在CSS或onclickJavascript中是您目前唯一的选择.
简单地说,在CSS中你可以定义它:
a.class:active {
background-color: #AAA;
...
}
要么:
.class:active {
background-color: #AAA;
...
}
但是您需要使用以下解决方法(或JS事件:ontouchstart)来模拟点击:
<body ontouchstart="">
| 归档时间： |
|
| 查看次数： |
18914 次 |
| 最近记录： |