6
मैंने एक बॉक्स बनाया जो ओवरव्यू होने पर किसी अन्य div में fades। यह सब CSS3 का उपयोग कर किया गया था। हालांकि, मुझे एक समस्या का एहसास हुआ कि hovers मोबाइल ब्राउज़र में काम नहीं करते हैं। क्या मोबाइल के लिए यह काम किसी भी तरह से करने का कोई तरीका है या क्या मुझे किसी प्रकार के जेएस का उपयोग करने का सहारा लेना है?CSS3 होवर/टैप मोबाइल ब्राउज़र में काम नहीं करता
संपादित करें: स्पष्टीकरण के लिए, मैं बस बॉक्स को टैप करने और विवरण दिखाने में सक्षम होना चाहता हूं। मैंने इसे अन्य वेबसाइटों पर देखा है। यह आमतौर पर कैसे किया जाता है? :)
जे एस फिडल: http://jsfiddle.net/ygShH/4/
एचटीएमएल
<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>
सीएसएस
के रूप में वहाँ कोई लगातार कर्सर है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;
}
मोबाइल ब्राउज़र के लिए कोई होवर नहीं है। उन्हें पता लगाने के लिए अभी तक पता नहीं है कि आप कहां उंगली कर रहे हैं स्क्रीन को स्पर्श किए बिना;) –
कोडी सही है, आपको हुक करने के लिए एक और इशारा करने की आवश्यकता है। –
मोबाइल डिवाइस पर होवर क्या है? अधिकांश में कर्सर का कोई भी रूप नहीं है और निम्नतम स्तर स्थिति संकेतक एक क्लिक है। आप किसी मोबाइल डिवाइस पर होवर करने के बजाए क्लिक पर ट्रिगर करने के लिए कुछ जावास्क्रिप्ट जोड़ सकते हैं। – smitec