टच डिवाइस पर होवर स्टेटस न दिखाएं

क्या यह संभव है? mouseover श्रोताओं में मेरी सभी होवर शैलियों को परिवर्तित करने का छोटा सा सीएसएस होवर राज्य ट्रिगर करने से टच डिवाइस को रोकना संभव है?टच डिवाइस पर होवर स्टेटस न दिखाएं

मेरे पास एक ऐसा एप्लिकेशन है जो स्पर्श और सूचक इनपुट दोनों पर काम करना चाहिए, यह बहुत अच्छा काम करता है लेकिन होवर पर लागू कुछ शैलियों को स्पर्श उपकरणों पर समझ में नहीं आता है क्योंकि उपयोगकर्ता ने टैप किए जाने के बाद अनिश्चित काल तक होवर राज्य को बनाए रखा है एक वस्तु। ध्यान में रखना

चीजें:

डिवाइस चौड़ाई मेरे लिए स्पर्श सक्षम उपकरणों टच स्क्रीन हम यहाँ का उपयोग कर रहे डेस्कटॉप आकार पर नज़र रखता है के साथ कोई संबंध भालू।
मैं उपयोगकर्ता को बहु-इनपुट डिवाइस पर स्पर्श के माध्यम से इनपुट करने के लिए मजबूर नहीं करना चाहता हूं।

स्रोत

2013-07-01 George Reith

मैं आपके सवाल का काफी interresting accros मिल गया और आया [निम्न आलेख] (एचटीटीपी:// www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/)। एक ही मुद्दा नहीं है, लेकिन क्या लेख के निचले हिस्से में समाधान आपकी स्थिति पर लागू होगा? –

प्रासंगिक: http://stackoverflow.com/questions/8291517/ – xec

@ बार्टड्यूड धन्यवाद, उस पहचान के साथ मेरा एकमात्र पकड़ है, मुझे विश्वास है कि यह पता लगाता है कि डिवाइस स्पर्श इनपुट करने में सक्षम है या नहीं, यह स्पर्श इनपुट का उपयोग कर रहा है या नहीं। जो कुछ भी नहीं बल्कि बेहतर नहीं है क्योंकि यह एक दूसरे इनपुट नियम को तोड़ने के लिए उपयोगकर्ता को मजबूर करने के लिए मजबूर करने के बारे में अपना दूसरा नियम तोड़ता है। यह आईई 10 AFAIK के लिए भी काम नहीं करता है (एक मालिकाना घटना का उपयोग करता है जो एक बार मुझे लगता है कि आईई सही हो गया है, ठीक है ... वह और बॉक्स मॉडल) हालांकि आप इसका पता लगाने का प्रयास कर सकते हैं। –

मैंने ऊपर दी गई टिप्पणियों में दिए गए लिंक में साझा दृष्टिकोण के बाद इस समस्या को हल किया था। यदि आप इसका उपयोग नहीं कर रहे हैं, तो इस परिदृश्य में Modernizr का उपयोग करने पर विचार करें। साथ ही कुछ अन्य तरीकों को सुनने के लिए ...

उपयोगकर्ता के रूप में, Blender का उल्लेख करना चाहेंगे, तो आप ऐसा तरह स्पर्श घटनाओं के खिलाफ जांच कर सकते हैं:

html.touch { 
    /* Touch Device ~ No Hovers */ 
} 

html.no-touch { 
    /* Not a Touch is disabled */ 
} 
html.no-touch .element:hover { 
    opacity:.5; 
}

स्रोत

2013-07-01 15:00:23

धन्यवाद, यह एक दिलचस्प बात है। हालांकि मुझे यकीन नहीं है कि क्या मॉडर्निज़र संभावित रूप से वास्तविक स्पर्श इनपुट या डिवाइस वाले उपकरणों का पता लगाता है, जिनकी क्षमता है। जो एक और समस्या लाता है, मैं एक पॉइंटर के बजाय स्पर्श इनपुट का उपयोग करने के लिए एक बहु-इनपुट डिवाइस के उपयोगकर्ताओं को मजबूर कर रहा हूं (कम से कम अपने अनुभव को सहज बनाने के लिए)। –

मॉडर्नइज़र टच डिटेक्शन फ़ंक्शन में खोदना, यह निम्न तरीके से जांचता है: 'if ((' विंडो में ऑनचचस्टार्ट '|| विंडो।दस्तावेज़ टच और दस्तावेज़ दस्तावेज़ का दस्तावेज़ उदाहरण) {' –

इसलिए आपके संदेह सही हैं कि परीक्षण केवल इंगित करता है कि ब्राउज़र स्पर्श ईवेंट का समर्थन करता है, लेकिन यह आवश्यक नहीं है कि यह टच डिवाइस है। अब आप मुझे जा रहे हैं ... कृपया अपने अंतिम दृष्टिकोण के साथ अद्यतन करें। –

मेरे समाधान के लिए मंडराना सक्रिय सीएसएस वर्ग को जोड़ने के लिए है एचटीएमएल टैग, और सभी सीएसएस चयनकर्ताओं की शुरुआत में इसका उपयोग करें: होवर और उस श्रेणी को पहले टचस्टार्ट ईवेंट पर हटा दें।

http://codepen.io/Bnaya/pen/EoJlb

जे एस:

(function() { 
    'use strict'; 

    if (!('addEventListener' in window)) { 
     return; 
    } 

    var htmlElement = document.querySelector('html'); 

    function touchStart() { 
     document.querySelector('html').classList.remove('hover-active'); 

     htmlElement.removeEventListener('touchstart', touchStart); 
    } 

    htmlElement.addEventListener('touchstart', touchStart); 
}());

HTML:

<html class="hover-active">

सीएसएस:

.hover-active .mybutton:hover { 
    box-shadow: 1px 1px 1px #000; 
}

स्रोत

2014-08-25 12:29:31 Bnaya

टच डिवाइस पर होवर स्टेटस न दिखाएं

उत्तर

संबंधित मुद्दे