9

ホバーすると別の div にフェードインするボックスを作成しました。これはすべて CSS3 を使用して行われました。しかし、私が気付いた 1 つの問題は、モバイル ブラウザーではホバーが機能しないことです。どういうわけかこれをモバイルで機能させる方法はありますか、それともある種の 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 に答える