का उपयोग कर होवर प्रभाव मैं छवि को दिखाने और छिपाने के लिए CSS3 होवर और संक्रमण का उपयोग कर रहा हूं। मोबाइल उपकरणों पर मैं स्पर्श घटनाओं के लिए एक ही संक्रमण का उपयोग करना चाहता हूं।CSS3 टच इवेंट
असल में, पहला स्पर्श होवर प्रभाव या रोलओवर करेगा, और टच अप रोल ऑफ प्रदर्शन करेगा।
मैं ऐसा करने के लिए जावास्क्रिप्ट का उपयोग करने से दूर रहना चाहता हूं। यदि शुद्ध CSS3 के साथ ऐसा करने का कोई तरीका है जो सबसे अच्छा विकल्प होगा।
अपने सीएसएस में :active छद्म श्रेणी का उपयोग करें, फिर शरीर टैग में ontouchstart="" और onmouseover="" जोड़ें।
निम्नलिखित कोड अपनी साइट से कुछ अंश है, जिसमें मैं बटन है कि छोटे हो जाते हैं और सफेद रोशनी होगी जब hovered (पीसी पर) या (टच डिवाइस पर) नीचे आयोजित
<style>
.boxbutton:active{
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-ms-transform:scale(0.9);
-o-transform:scale(0.9);
transform:scale(0.9);
-webkit-box-shadow:0px 0px 20px #FFF;
-moz-box-shadow:0px 0px 20px #FFF;
-o-box-shadow:0px 0px 20px #FFF;
box-shadow:0px 0px 20px #FFF;
}
</style>
<body ontouchstart="">
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div>
</a>
</body>
निम्नलिखित संपादन हैं अब प्रासंगिक है क्योंकि मैं मूल, गलत निर्देश नष्ट कर दिया है, लेकिन अगर आप इन से पहले यहाँ थे अभी भी सहायक हो सकता है
संपादित करें: मैं खोज की है यह, अगर और अधिक विश्वसनीय काम करता है न कि हर कड़ी में ontouchstart="" डालने से, इसे <body> टैग में डालें। तो आपके शरीर टैग इस <body ontouchstart=""> की तरह दिखना चाहिए और अपने लिंक इस
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div></a>
संपादित की तरह लग रहे 2: मैं, कि अपने सीएसएस कॉपी करने और डेस्कटॉप के लिए स्क्रीन आकार प्रश्नों का उपयोग करने के बजाय, बस `onmouseover जोड़ने पता लगा है = "" शरीर टैग को भी, इसलिए: सक्रिय छद्म वर्ग को माउस पर डेस्कटॉप पर और मोबाइल पर स्पर्श करके बुलाया जाएगा। यदि आप ऐसा करते हैं तो आप केवल मीडिया प्रश्नों के बारे में जुआ को अनदेखा कर सकते हैं।
thx, मेरे लिए काम करता है। – Mario
यह काम करता है। धन्यवाद। लेकिन मुझे वांछित प्रभाव प्राप्त करने के लिए * क्यों * ontouchstart = "" और onmouseover = "की व्याख्या पसंद आएगी। निश्चित रूप से मेरे लिए स्वयं स्पष्ट नहीं है। –
ठीक है, मैं इसे समझाने का सबसे अच्छा व्यक्ति नहीं हो सकता, लेकिन जिस तरह से मैं इसे समझता हूं वह यह है: ऑनचouchस्टार्ट और ऑनहाउसओवर श्रोताओं हैं, वे प्रश्न में तत्व को छूने या इस पर ध्यान देने के लिए इंतजार कर रहे हैं (इस मामले में) तो कॉल करेंगे उद्धरण के अंदर नामित जावास्क्रिप्ट फ़ंक्शन। हमारे मामले में, हमने उद्धरण खाली छोड़ दिए ताकि कोई स्क्रिप्ट निष्पादित न हो, लेकिन क्योंकि श्रोताओं वहां हैं, वेब ब्राउज़र अभी भी उन्हें सक्रिय मानता है। : सक्रिय छद्म वर्ग किसी तत्व पर लागू होता है यदि यह वर्तमान में जावास्क्रिप्ट के साथ सक्रिय है। श्रोताओं का कारण बनता है: सक्रिय छद्म वर्गों को लागू किया जाना चाहिए। –
आप अपने HTML कोड को संशोधित नहीं करना चाहते, तो आप इस कोशिश कर सकते:
<script>
document.body.addEventListener('touchstart',function(){},false);
</script>
यह काम नहीं करता है। – matthewpavkov
@matthewpavkov यह काम करेगा, लेकिन addEventlistener की बजाय addEventListener होना चाहिए। –
आप कर रहे हैं सवाल वास्तव में नहीं बल्कि अस्पष्ट है; मुझे यकीन नहीं है कि आप पूछ रहे हैं कि * इसे * कैसे करें, या इसे अकेले सीएसएस में किया जा सकता है। यदि आप जावास्क्रिप्ट में यह कैसे किया जा सकता है, इस बारे में अधिक जानकारी चाहते हैं तो कृपया अपडेट करें कि आप सवाल हैं और मैं अपना उत्तर अपडेट कर सकता हूं :) – rlemon
* आपका प्रश्न ;-) –
संभावित डुप्लिकेट [: सक्रिय छद्म वर्ग में काम नहीं करता है मोबाइल सफारी] (https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in- मोबाइल- सफ़ारी) – JakeGould