क्या इसे अनदेखा करना संभव है: iPhone / iPad के उपयोगकर्ताओं के लिए हॉवर प्यूडोक्लास?

94

मेरी साइट पर कुछ सीएसएस मेनू हैं जिनका विस्तार :hover(बिना js के) है

यह iDevices पर अर्ध-टूटे हुए तरीके से काम करता है, उदाहरण के लिए एक टैप :hoverनियम को सक्रिय करेगा और मेनू का विस्तार करेगा, लेकिन फिर कहीं और टैप करने से इसे हटा नहीं सकता है :hover। साथ ही अगर तत्व के अंदर एक लिंक है जो :hover'एड' है, तो आपको लिंक को सक्रिय करने के लिए दो बार टैप करना होगा (पहला टैप ट्रिगर्स :hover, दूसरा टैप ट्रिगर लिंक)।

मैं इस touchstartघटना को बांधकर iphone पर अच्छी तरह से काम करने में सक्षम हूं ।

समस्या यह है कि कभी-कभी मोबाइल सफारी मेरी घटनाओं के बजाय:hover सीएसएस से नियम को ट्रिगर करना चुनता है !touchstart

मुझे पता है कि यह समस्या है क्योंकि जब मैं :hoverसीएसएस में सभी नियमों को मैन्युअल रूप से अक्षम करता हूं , तो मोबाइल सफारी शानदार काम करता है (लेकिन नियमित ब्राउज़र स्पष्ट रूप से अब और नहीं करते हैं)।

:hoverजब उपयोगकर्ता मोबाइल सफारी पर है, तो क्या कुछ तत्वों के लिए नियमों को "रद्द" करने का एक तरीका है ?

यहां iOS व्यवहार देखें और तुलना करें: http://jsfiddle.net/74s35/3/ नोट: केवल कुछ सीएसएस गुण दो-क्लिक व्यवहार को ट्रिगर करते हैं, जैसे प्रदर्शन: कोई नहीं; लेकिन पृष्ठभूमि नहीं: लाल; या पाठ-सजावट: रेखांकित करना;

— क्रिस्टोफर कैंप
स्रोत

7

कृपया केवल 'स्पर्श' घटनाओं की उपस्थिति के कारण होवरिंग को अक्षम न करें। यह उन लैपटॉप के उपयोगकर्ताओं को प्रतिकूल रूप से प्रभावित करेगा जिनके पास स्पर्श और माउस इनपुट डिवाइस हैं। अधिक जानकारी के लिए मेरा उत्तर देखें

— शमौन_वेफर

77

मैंने पाया कि iPhone / iPad Safari में ": hover" अप्रत्याशित है। कभी-कभी तत्व पर टैप करने से वह तत्व ": हॉवर" हो जाता है, जबकि कभी-कभी यह अन्य तत्वों में बदल जाता है।

कुछ समय के लिए, मेरे पास शरीर पर "नो-टच" क्लास है।

<body class="yui3-skin-sam no-touch">
   ...
</body>

और सभी सीएसएस नियम ": नीचे" "-वर-स्पर्श" के साथ हैं:

.no-touch my:hover{
   color: red;
}

पृष्ठ में कहीं, मेरे पास शरीर से नो-टच क्लास को हटाने के लिए जावास्क्रिप्ट है ।

if ('ontouchstart' in document) {
    Y.one('body').removeClass('no-touch');
}

यह सही नहीं लगता है, लेकिन यह वैसे भी काम करता है।

— मॉर्गन चेंग
स्रोत

5

इसे करने का एकमात्र तरीका है। मुझे क्या परेशान करता है कि यह सामान के साथ "सामान्य" साइट को प्रदूषित करता है जो वहां नहीं है और अप्रासंगिक है। ओह अच्छा। धन्यवाद।

— क्रिस्टोफर कैंप

तुम भी IE के लिए एक वापसी के साथ मीडिया के सवालों का उपयोग कर सकते हैं

— लाइम

2

@ शकरॉक: मुझे नहीं लगता कि "एक टैप टू होवर और टू क्लिक" दृष्टिकोण एक अच्छा समाधान है। चूंकि वास्तव में एक टच डिवाइस पर कोई वास्तविक हॉवर नहीं है (जब तक कि वे स्क्रीन के साथ नहीं आते हैं जो आपकी उंगली को इस पर मँडराते हैं), मुझे लगता है कि हॉवरिंग का अनुकरण न करना बेहतर है। प्रभाव के लिए, जैसे बटन और लिंक पर आम, बस प्रभाव को छोड़ दें। होवर पर विस्तार करने वाले मेनू के लिए, उन्हें टैप पर विस्तारित करें / इसके बजाय क्लिक करें। मेरा 2 सी।

— एड्रियन श्मिट

18

मैंने हाल ही में नए विंडोज 8 सिस्टम के कारण इस तरह के दृष्टिकोण को पाया है जिसमें स्पर्श और माउस इनपुट शामिल हैं

— टॉम 16

4

+1 से टॉम की टिप्पणी - ऑनटचस्टार्ट के लिए चेकिंग स्पर्श-सक्षम लैपटॉप पर सही वापस आ जाएगी, यहां तक कि बाहरी मॉनिटर में प्लग किए जाने पर (जहां होवर राज्यों के साथ माउस-अनुकूल साइट अधिक वांछनीय है)।

— gregdev

45

:hoverयहाँ मुद्दा नहीं है। IOS के लिए Safari एक बहुत ही अजीब नियम का पालन करता है। यह आग mouseoverऔर mousemoveपहले; अगर इन घटनाओं के दौरान कुछ भी बदला जाता है, तो 'क्लिक' और संबंधित घटनाओं को निकाल नहीं दिया जाता है:

mouseenter तथा mouseleave शामिल होने के लिए प्रकट होते हैं, हालांकि वे चार्ट में निर्दिष्ट नहीं हैं।

यदि आप इन घटनाओं के परिणामस्वरूप कुछ भी संशोधित करते हैं, तो क्लिक करें घटनाओं को निकाल नहीं दिया जाएगा। जिसमें DOM ट्री में कुछ ऊपर तक शामिल है। उदाहरण के लिए, यह आपकी वेबसाइट पर jQuery के साथ काम करने से सिंगल क्लिक को रोकेगा:

$(window).on('mousemove', function() {
    $('body').attr('rel', Math.random());
});

संपादित करें: स्पष्टीकरण के लिए, jQuery की hoverघटना शामिल है mouseenterऔर mouseleave। clickयदि सामग्री बदली गई है तो ये दोनों रोकेंगे ।

— Zenexer
स्रोत

5

बेशक: मंडराना मुद्दा :-) या इसके बजाय सफारी की छोटी गाड़ी कार्यान्वयन है। यह मुद्दे पर दिलचस्प पृष्ठभूमि है, लेकिन Apple एकमात्र पार्टी है जो इस भयानक व्यवहार को ठीक कर सकती है। जब तत्वों के बाहर कुछ क्लिक किया जाता है, या पहली बार में 'होवर' नहीं किया जाता है, तो इसे या तो 'अनहॉवर' करने की आवश्यकता होती है। वर्तमान व्यवहार मूल रूप से किसी भी वेबसाइट को तोड़ता है जो उपयोग करता है: माउस के लिए होवर

— सिमोन_विवर

इससे मुझे यह महसूस करने में मदद मिली कि jquery hoverहैंडलर एक अलग clickहैंडलर को हिट होने से रोक रहा है - क्या मज़ाक है!

— शमौन_वेर

1

शानदार जवाब, और समस्या का सबसे अच्छा विवरण मैं भर में आया हूँ। यह सिर्फ सीएसएस होवर नहीं है जो "डबल क्लिक" समस्या का कारण बनता है, लेकिन माउसओवर / माउसएंटर एट अल इवेंट्स के बाद सचमुच कोई डोम संशोधन है।

— ओलिवर जोसेफ ऐश

यहाँ एक उदाहरण है जो क्लिक इवेंट को फायरिंग नहीं दिखाता है जब DOM को mouseenter jsbin.com/maseti/5/edit?html,js,output

— ओलिवर जोसेफ ऐश

@ ओलिवर जोसेफ ऐश राइट, इसलिए जवाब में जेएस उदाहरण। ;)

— ज़ेनेक्सर

18

ब्राउज़र फ़ीचर डिटेक्शन लाइब्रेरी मॉडर्नाइज़र में टच इवेंट्स के लिए एक चेक शामिल है।

यह डिफ़ॉल्ट व्यवहार है कि प्रत्येक विशेषता का पता लगाने के लिए अपने एचटीएमएल तत्व पर कक्षाएं लागू करें। फिर आप अपने दस्तावेज़ को स्टाइल करने के लिए इन कक्षाओं का उपयोग कर सकते हैं।

यदि टच ईवेंट सक्षम नहीं हैं, तो Modernizr एक वर्ग जोड़ सकता है no-touch:

<html class="no-touch">

और फिर इस वर्ग के साथ अपनी हॉवर शैलियों को गुंजाइश दें:

.no-touch a:hover { /* hover styles here */ }

आप एक कस्टम मॉडर्निज़्र बिल्ड डाउनलोड कर सकते हैं कुछ के रूप में या आप की जरूरत के रूप में कई सुविधा के रूप में शामिल करने के लिए ।

यहां कुछ वर्गों का एक उदाहरण दिया गया है, जिन्हें लागू किया जा सकता है:

<html class="js no-touch postmessage history multiplebgs
             boxshadow opacity cssanimations csscolumns cssgradients
             csstransforms csstransitions fontface localstorage sessionstorage
             svg inlinesvg no-blobbuilder blob bloburls download formdata">

— ब्यू स्मिथ
स्रोत

ज्ञात हो कि Chrome के डेस्कटॉप पर हाल के संस्करणों में जो मॉर्डनिज़ रिपोर्ट "टच" करता है। यह स्पष्ट रूप से touchevents के साथ संस्करण 3 में ठीक किया गया है।

— क्रेग जैकब्स

18

कुछ उपकरणों (जैसा कि अन्य ने कहा है) में स्पर्श और माउस दोनों घटनाएं हैं। उदाहरण के लिए Microsoft सरफेस में एक टच स्क्रीन, एक ट्रैकपैड और एक स्टाइलस है जो वास्तव में हॉवर की घटनाओं को उठाता है जब इसे स्क्रीन के ऊपर मँडरा जाता है।

कोई भी समाधान जो अक्षम हो :hover 'स्पर्श' घटनाओं की उपस्थिति के आधार पर होता है, भूतल उपयोगकर्ताओं (और कई अन्य समान उपकरणों) को भी प्रभावित करेगा। कई नए लैपटॉप स्पर्श कर रहे हैं और स्पर्श घटनाओं का जवाब देंगे - इसलिए होवरिंग को अक्षम करना वास्तव में एक बुरा अभ्यास है।

यह सफारी में एक बग है, इस भयानक व्यवहार का कोई औचित्य नहीं है। मैं आईओएस सफारी में बग के कारण गैर-आईओएस ब्राउज़रों को तोड़फोड़ करने से इनकार करता हूं जो कि जाहिर तौर पर सालों से हैं। मुझे वास्तव में उम्मीद है कि वे इसे अगले सप्ताह iOS8 के लिए ठीक कर देंगे लेकिन इस बीच ...।

मेरा समाधान :

कुछ ने पहले से ही मॉडर्निज़र का उपयोग करने का सुझाव दिया है, अच्छी तरह से मॉर्डनिज़्र आपको अपने स्वयं के परीक्षण बनाने की अनुमति देता है। मैं यहां मूल रूप से जो कर रहा हूं वह एक ब्राउजर के विचार को 'अमूर्त' कर रहा है जो कि :hoverमॉर्डनिजर टेस्ट में सपोर्ट करता है जिसे मैं अपने कोड में हार्डकोडिंग के बिना इस्तेमाल कर सकता हूं if (iOS)।

 Modernizr.addTest('workinghover', function ()
 {
      // Safari doesn't 'announce' to the world that it behaves badly with :hover
      // so we have to check the userAgent  
      return navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? false : true;
 });

फिर सीएसएस कुछ इस तरह बन जाता है

html.workinghover .rollover:hover 
{
    // rollover css
}

केवल iOS पर यह परीक्षण विफल हो जाएगा और रोलओवर अक्षम कर देगा।

इस तरह के अमूर्त का सबसे अच्छा हिस्सा यह है कि अगर मुझे लगता है कि यह एक निश्चित एंड्रॉइड पर टूट जाता है या अगर यह iOS9 में तय हो गया है, तो मैं बस परीक्षण को संशोधित कर सकता हूं।

— Simon_Weaver
स्रोत

यह समाधान गंदा और वहाँ से बाहर दोनों सबसे अच्छा है। यह केवल तभी टूटता है जब एक ब्राउज़र जो होवर से संघर्ष करता है, उसके पास स्पर्श और क्लिक दोनों होते हैं, लेकिन ipad / iphone पर केवल-टच ब्राउज़र के लिए यह मामला नहीं है। मेरा सुझाव है कि इसे केवल ऑप्टिमाइज़ेशन फ़िक्स के रूप में लागू किया जाए (फास्टक्लिक.जेएस का उपयोग करते समय होवर फ़्लिकरिंग को हटाने के लिए) और सुनिश्चित करें कि सब कुछ इसके बिना भी काम करता है।

— गेरोम जूल

धन्यवाद। मैं सहमत हूँ। देखने के लिए उत्सुक आईओएस 9 इस मुद्दे के लिए क्या करता है - अगर कुछ भी।

— सिमोन_विवर

मैं विपरीत दिशा में चला गया:html:not(.no-hover) .category:hover { ...

— क्रिस मैरिसिक

+1 के लिए "सफ़ारी दुनिया के लिए 'घोषणा' नहीं करता है कि वह इसके साथ बुरा बर्ताव करता है: हॉवर" यह मुद्दा मेरी राय में आईई के किसी भी संस्करण की तुलना में आईओएस को बदतर बनाता है ...

— स्पेंसर ओ'रिली

16

FastClick लाइब्रेरी को अपने पेज पर जोड़ने से मोबाइल डिवाइस पर सभी टैप क्लिक इवेंट्स में बदल जाएंगे (चाहे उपयोगकर्ता क्लिक करें), इसलिए इसे मोबाइल डिवाइस पर होवर समस्या को भी ठीक करना चाहिए। मैंने आपकी फ़ाइडल को एक उदाहरण के रूप में संपादित किया: http://jsfiddle.net/FvACN/8/ ।

बस fastclick.min.js को अपने पेज पर लाइक करें, और इसके द्वारा सक्रिय करें:

FastClick.attach(document.body);

एक साइड बेनिफिट के रूप में, यह मोबाइल डिवाइस पर होने वाले कष्टप्रद 300ms ऑनक्लिक विलंब को भी हटा देगा।

FastClick का उपयोग करने के कुछ छोटे परिणाम हैं जो आपकी साइट के लिए महत्वपूर्ण हो सकते हैं या नहीं:

यदि आप पृष्ठ पर कहीं टैप करते हैं, तो स्क्रॉल करें, नीचे स्क्रॉल करें, और फिर अपनी उंगली को उसी स्थिति पर छोड़ दें, जिसे आपने शुरू में रखा था, FastClick एक "क्लिक" के रूप में व्याख्या करेगा, हालांकि यह स्पष्ट रूप से नहीं है। कम से कम यह है कि यह FastClick के संस्करण में काम करता है जिसे मैं वर्तमान में उपयोग कर रहा हूं (1.0.0)। हो सकता है कि किसी ने उस संस्करण के बाद से समस्या को ठीक कर दिया हो।
FastClick किसी के लिए "डबल क्लिक" करने की क्षमता को हटा देता है।

— ट्रॉय
स्रोत

1

क्या आप एक और ठोस उदाहरण साझा करने के लिए तैयार होंगे कि मैं अपनी वेबसाइट के लिए यह कैसे कर सकता हूं। मुझे जावास्क्रिप्ट के बारे में कुछ नहीं पता है इसलिए मैं थोड़ा उलझन में हूँ कि यह कैसे काम करेगा। मेरी वेबसाइट पर मेरे पास ये सभी लिंक हैं जो उपयोगकर्ता आमतौर पर क्लिक करने से पहले होवर करते हैं, लेकिन आईपैड / मोबाइल के लिए मैं इसे बनाना चाहता हूं ताकि उन्हें दो बार क्लिक न करना पड़े।

— एंडी

@ और - यह बिल्कुल स्पष्ट नहीं है कि आपको क्या चाहिए और आप क्या याद कर रहे हैं ... आपने क्या प्रयास किया है, अब तक, और आप क्या त्रुटियां देख रहे हैं, यदि कोई हो? हो सकता है कि एक नया स्टैकओवरफ़्लो प्रश्न बनाना सबसे अच्छा होगा, अगर आप पहले से ही ऐसा नहीं कर रहे हैं, तो आप क्या करने की कोशिश कर रहे हैं (?) के एक उदाहरण के साथ या यह स्पष्ट करने की कोशिश करें कि यह उपरोक्त, jsfiddle उदाहरण है कि आप क्या करते हैं? ' t समझ।

— ट्रॉय

क्या यह एकल पृष्ठ अनुप्रयोगों में उपयोग किया जा सकता है? मेरा मतलब है कि जब DOM कंटेंट को हर बार अपडेट किया जाता है

— सेबस्टियन लॉबर

हां, मैं इसे सिंगल-पेज एप्लिकेशन के साथ उपयोग कर रहा हूं।

— ट्रॉय

16

एक बेहतर समाधान, बिना किसी जेएस, सीएसएस क्लास और व्यूपोर्ट चेक के: आप इंटरएक्शन मीडिया फीचर्स (मीडिया क्वेरी लेवल 4) का उपयोग कर सकते हैं

ऐशे ही:

@media (hover) {
  // properties
  my:hover {
    color: red;
  }
}

iOS सफारी इसका समर्थन करता है

के बारे में अधिक: https://www.jonathanfielding.com/an-introduction-to-interaction-media-features/

— एस्टेवो लुकास
स्रोत

फ़ायरफ़ॉक्स द्वारा समर्थित नहीं है (हालांकि इस टिप्पणी के समय)

— फ्रैंक

यह अब फ़ायरफ़ॉक्स द्वारा समर्थित है, साथ ही (एफएफ 64+, रिलीज़ दिसंबर 2018)।

— wunch

4

मूल रूप से तीन परिदृश्य हैं:

उपयोगकर्ता के पास केवल एक माउस / पॉइंटर डिवाइस है और सक्रिय कर सकता है:hover
उपयोगकर्ता के पास केवल एक टचस्क्रीन है, और :hoverतत्वों को सक्रिय नहीं कर सकता है
उपयोगकर्ता के पास टचस्क्रीन और पॉइंटर डिवाइस दोनों हैं

मूल रूप से स्वीकार किए जाते हैं जवाब अच्छा काम करता है, तो केवल पहले दो परिदृश्यों संभव हैं, जहां एक उपयोगकर्ता है या तो सूचक या टचस्क्रीन। यह सामान्य था जब ओपी ने 4 साल पहले सवाल पूछा था। कई उपयोगकर्ताओं ने बताया है कि विंडोज 8 और सरफेस डिवाइस तीसरे परिदृश्य को अधिक संभावना बना रहे हैं।

टचस्क्रीन डिवाइस (जैसे @Zenexer द्वारा विस्तृत) पर हॉवर न करने की समस्या का iOS समाधान चतुर है, लेकिन सीधे कोड को दुर्व्यवहार का कारण बन सकता है (जैसा कि ओपी द्वारा उल्लेख किया गया है)। केवल टचस्क्रीन डिवाइस के लिए होवर को अक्षम करने का मतलब है कि आपको अभी भी टचस्क्रीन फ्रेंडली विकल्प को कोड करना होगा। यह पता लगाने पर कि जब किसी उपयोगकर्ता के पास सूचक और टचस्क्रीन दोनों हैं, तो पानी को पिघला देता है (जैसा कि @Simon_Weaver द्वारा समझाया गया है)।

इस बिंदु पर, सबसे सुरक्षित समाधान यह है :hoverकि उपयोगकर्ता अपनी वेबसाइट के साथ बातचीत करने का एकमात्र तरीका उपयोग करने से बचें । हॉवर प्रभाव यह संकेत देने का एक अच्छा तरीका है कि लिंक या बटन कार्रवाई योग्य है, लेकिन उपयोगकर्ता को आपकी वेबसाइट पर कार्रवाई करने के लिए किसी तत्व को हॉवर करने की आवश्यकता नहीं होनी चाहिए।

टचस्क्रीन के साथ री-थिंकिंग "होवर" कार्यक्षमता, वैकल्पिक यूएक्स दृष्टिकोणों के बारे में अच्छी चर्चा है। वहाँ जवाब द्वारा प्रदान समाधान शामिल हैं:

प्रत्यक्ष क्रियाओं (हमेशा दृश्य लिंक) के साथ होवर मेनू बदलना
ऑन-टैप मेनू के साथ ऑन-हॉवर मेनू को बदलना
बड़ी मात्रा में ऑन-होवर सामग्री को एक अलग पृष्ठ में ले जाना

आगे बढ़ते हुए, यह संभवतः सभी नई परियोजनाओं के लिए सबसे अच्छा समाधान होगा। स्वीकृत उत्तर संभवतः दूसरा सबसे अच्छा समाधान है, लेकिन उन उपकरणों के लिए भी सुनिश्चित करें जिनके पास सूचक डिवाइस भी हैं। कार्यक्षमता को खत्म करने के लिए सावधान रहें जब एक डिवाइस में सिर्फ iOS के :hoverहैक के आसपास काम करने के लिए टचस्क्रीन हो ।

— thirdender
स्रोत

1

आपके .css में JQuery का संस्करण .no-टच .my-element: आपके सभी होवर नियमों के लिए होवर में JQuery और निम्न स्क्रिप्ट शामिल करता है

function removeHoverState(){
    $("body").removeClass("no-touch");
}

फिर बॉडी टैग में class = "no-touch" ontouchstart = "removeHoverState ()" जोड़ें

जैसे ही ontouchstart सभी होवर राज्यों के लिए वर्ग निकालता है

— ग्रेग
स्रोत

0

स्पर्श उपलब्ध होने पर केवल होवर प्रभाव के बजाय मैंने स्पर्श घटनाओं को संभालने के लिए एक प्रणाली बनाई और इससे मेरे लिए समस्या हल हो गई। सबसे पहले, मैंने "टैप" ("क्लिक" के बराबर) घटनाओं के लिए परीक्षण के लिए एक वस्तु को परिभाषित किया।

touchTester = 
{
    touchStarted: false
   ,moveLimit:    5
   ,moveCount:    null
   ,isSupported:  'ontouchend' in document

   ,isTap: function(event)
   {
      if (!this.isSupported) {
         return true;
      }

      switch (event.originalEvent.type) {
         case 'touchstart':
            this.touchStarted = true;
            this.moveCount    = 0;
            return false;
         case 'touchmove':
            this.moveCount++;
            this.touchStarted = (this.moveCount <= this.moveLimit);
            return false;
         case 'touchend':
            var isTap         = this.touchStarted;
            this.touchStarted = false;
            return isTap;
         default:
            return true;
      }
   }
};

फिर, मेरे ईवेंट हैंडलर में मैं निम्नलिखित की तरह कुछ करता हूं:

$('#nav').on('click touchstart touchmove touchend', 'ul > li > a'
            ,function handleClick(event) {
               if (!touchTester.isTap(event)) {
                  return true;
               }

               // touch was click or touch equivalent
               // nromal handling goes here.
            });

— डोनट
स्रोत

0

इस उत्तर के लिए @ मॉर्गन चेंग धन्यवाद, हालांकि मैंने " टचस्टार्ट " (@ टिमोथी पेरेज़ उत्तर से लिया गया कोड ) प्राप्त करने के लिए जेएस फ़ंक्शन को थोड़ा संशोधित किया है , हालांकि, आपको इसके लिए jQuery 1.7+ की आवश्यकता है

  $(document).on({ 'touchstart' : function(){
      //do whatever you want here
    } });

— 3Gee
स्रोत

0

Zenexer द्वारा प्रदान की गई प्रतिक्रिया को देखते हुए, एक पैटर्न जिसके लिए अतिरिक्त HTML टैग की आवश्यकता नहीं है:

jQuery('a').on('mouseover', function(event) {
    event.preventDefault();
    // Show and hide your drop down nav or other elem
});
jQuery('a').on('click', function(event) {
    if (jQuery(event.target).children('.dropdown').is(':visible') {
        // Hide your dropdown nav here to unstick
    }
});

यह विधि माउसओवर को बंद करती है, पहले क्लिक को।

— veryphatic
स्रोत

0

मैं सहमत हूं कि स्पर्श के लिए हॉवर को अक्षम करना एक रास्ता है।

हालांकि, अपने सीएसएस को फिर से लिखने की परेशानी से बचाने के लिए, बस किसी भी :hoverआइटम को लपेटें@supports not (-webkit-overflow-scrolling: touch) {}

.hover, .hover-iOS {
  display:inline-block;
  font-family:arial;
  background:red;
  color:white;
  padding:5px;
}
.hover:hover {
  cursor:pointer;
  background:green;
}

.hover-iOS {
  background:grey;
}

@supports not (-webkit-overflow-scrolling: touch) {
  .hover-iOS:hover {
    cursor:pointer;
    background:blue;
  }

}

<input type="text" class="hover" placeholder="Hover over me" />

<input type="text" class="hover-iOS" placeholder="Hover over me (iOS)" />

स्निपेट का विस्तार करें

— जॉर्डन यंग
स्रोत

0

:hoverआईओएस सफारी पर घटनाओं को अक्षम करने के सामान्य उपयोग के मामले के लिए , सबसे सरल तरीका है कि आप अपने :hoverईवेंट के लिए न्यूनतम चौड़ाई वाली मीडिया क्वेरी का उपयोग करें जो आपके द्वारा बचाए जा रहे उपकरणों की स्क्रीन की चौड़ाई से ऊपर रहता है। उदाहरण:

@media only screen and (min-width: 1024px) {
  .my-div:hover { // will only work on devices larger than iOS touch-enabled devices. Will still work on touch-enabled PCs etc.
    background-color: red;
  }
}

— ब्रायन स्क्रैमलिन
स्रोत

-6

ज़रा स्क्रीन साइज़ तो देखो…।

@media (min-width: 550px) {
    .menu ul li:hover > ul {
    display: block;
}
}

— oeliewoep
स्रोत

-12

आप जिस कोड को रखना चाहते हैं, उसे उसका उपयोग करता है

// a function to parse the user agent string; useful for 
// detecting lots of browsers, not just the iPad.
function checkUserAgent(vs) {
    var pattern = new RegExp(vs, 'i');
    return !!pattern.test(navigator.userAgent);
}
if ( checkUserAgent('iPad') ) {
    // iPad specific stuff here
}

— ल्यूक
स्रोत