CSS3 vver/tap mobil tarayıcılarda çalışmaz

Üzerine gelindiğinde başka bir bölüme giren bir kutu yarattım. Bu, CSS3 kullanılarak yapıldı. Ancak, fark ettiğim bir sorun, gezginin mobil tarayıcılarda çalışmadığıydı. Bir şekilde bu işi mobil olarak yapmanın bir yolu var mı, yoksa bir çeşit JS kullanmaya başvurmalı mıyım?CSS3 vver/tap mobil tarayıcılarda çalışmaz

DÜZENLEME: Açıklığa kavuşturmak için sadece kutuya dokunup açıklamaların gösterilmesini istiyorum. Diğer web sitelerinde gördüm. Bu genellikle nasıl yapılır? :)

JS Fiddle: 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

hiçbir kalıcı imleç olmadığı için

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

kaynak

2013-04-23 J82

Mobil tarayıcılarda gezinmek yok. Ekrana dokunmadan parmağınızın nerede olduğunu henüz tespit etmediler;) –

Cody doğruysa, başka bir hareketi düşünmeniz gerekiyor. –

Mobil cihazda gezinme nedir? Çoğu, herhangi bir imleç biçimine sahip değildir ve en düşük seviye konumu göstergesi bir tıklamadır. Bir mobil cihazda gezinmek yerine tıklama üzerinde tetiklemek için bazı javascript ekleyebilirsiniz. – smitec

Hovers mobil cihazlarda mümkün değildir - son bellek varsayılan olarak dokundu. onlar etkileşimi hissedebilir

tek yolu sadece seçenekler şu anda JavaScript CSS kadar :active bir tıklama veya seçime benzerlik göstermektedir dokunmatik, ya onclick olduğunu.

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

Veya:

Simplistically, CSS'deki bunu tanımlayabilir

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

Ama aşağıdaki geçici çözümü (ya JS olayları: ontouchstart ) kullanmak gerekir klik taklit etmek :

<body ontouchstart="">

kaynak

2013-04-23 23:35:24 nickhar

Teşekkür ederim. JS Fiddle örneğimde 'active 'durumunu nasıl birleştirebileceğimin bir örneğini gösterebilir misiniz? – J82

@Desi saf css veya jquery istiyor musunuz? –

@Cody Sadece CSS olabileceğini umuyordum. – J82

Bir mobil tarayıcıda r kodu? Sanmıyorum çünkü aslında iyi çalışıyor!

JSFiddle'ınızın tam ekran sürümünü kullanarak kendiniz kontrol edin. Ben sadece varsayılan tarayıcı, Dolphin Browser ve Opera Classic kullanarak Android 2.3 test ettik - hiç sorun yok!

Bağlantı etiketlerinde kullandığınızda, gezinme sorunludur. Nedeni açıktır - bir linke tıkladığınızda başka bir adrese yönlendirilirsiniz, bu nedenle de hover durumunu gerçekten göremezsiniz (bu, tarayıcınıza bağlı olarak değişir). Bununla birlikte, diğer durumlarda vurgulu çalışır, yani vurgulu olaylar muslukta tetiklenir.

kaynak

2013-09-29 14:49:33 tomasz86

CSS3 vver/tap mobil tarayıcılarda çalışmaz

cevap

İlgili konular