Question

我创建了一个盒子，当它盘旋时会逐渐变成另一个div。这都是使用CSS3完成的。但是，我意识到的一个问题是，悬停在移动浏览器中不起作用。有没有办法以某种方式使这个工作移动或我不得不求助于使用某种JS？

编辑：为了澄清，我只想点击框并显示说明。我在其他网站上看过。这通常是怎么做的？：）

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

Answer 1

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

他们感知互动的唯一方式是触摸，这类似于点击或选择，因此CSS中的:active或Javascript中的onclick是您目前唯一的选择

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

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

或者：

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

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

<body ontouchstart="">

Answer 2

您是否在移动浏览器中实际测试过代码？我不这么认为，因为事实上，它运作正常！

使用JSFiddle的全屏版本自行检查。我刚刚使用默认浏览器Dolphin Browser和Opera Classic在Android 2.3上测试过它 - 完全没问题！

当您在锚标签上使用时，悬停是有问题的。原因很明显 - 一旦您点击链接，您就会被重定向到另一个地址，因此您无法真正看到悬停状态（这取决于您的浏览器）。但是，在其他情况下，悬停确实有效，即悬停事件会在点击时触发。

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

2 个答案: