परिवर्तन: मोबाइल उपकरणों के लिए स्पर्श / क्लिक करने के लिए होवर करें

Question

मैं चारों ओर देख चुका हूँ, लेकिन मुझे वह नहीं मिल रहा है जिसकी मुझे तलाश है।

मेरे पास वर्तमान में मेरे पृष्ठ पर एक css एनीमेशन है जो कि: hover द्वारा ट्रिगर किया गया है। मैं यह चाहूंगा कि जब पृष्ठ को मीडिया क्वेश्चन का उपयोग करके पिछले चौड़ाई 700px के आकार में बदला जाए तो 'क्लिक' या 'टच' में बदल दें।

यहाँ मेरे पास इस समय क्या है: http://jsfiddle.net/danieljoseph/3p6Kz/

जैसा कि आप देख सकते हैं: मोबाइल उपकरणों पर हॉवर काम नहीं करेगा, लेकिन मैं अभी भी यह सुनिश्चित करना चाहता हूं कि यह ठीक उसी तरह काम करे, न कि होवर।

मैं अगर संभव हो तो सीएसएस का उपयोग करूंगा लेकिन JQuery से भी खुश हूं।

मुझे लग रहा है कि यह करना बहुत आसान है लेकिन मैं कुछ बहुत ही स्पष्ट याद कर रहा हूं! किसी भी सहायता की सराहना की जाएगी।

यहाँ सीएसएस एनीमेशन है:

.info-slide {
  position:absolute;
  bottom:0;
  float:left;
  width:100%;
  background:url(../images/blue-back.png);
  height:60px;
  cursor:pointer;
  overflow:hidden;
  text-align:center;
  transition: height .4s ease-in-out;
  -webkit-transition: height .4s ease-in-out;
  -moz-transition: height .4s ease-in-out;
}

.info-slide:hover {
  height:300px;
}

Comments

वहाँ एक jquery प्लगइन है जिसे hoverIntent कहा जाता है

— Pete

Answer 1

यदि आप उपयोग करते हैं: सक्रिय चयनकर्ता के साथ संयोजन में: होवर आप इसे तब तक प्राप्त कर सकते हैं जब तक w3schools के अनुसार : सक्रिय चयनकर्ता को होवर चयनकर्ता के बाद कहा जाता है।

 .info-slide:hover, .info-slide:active{
   height:300px;
 }

आपको मोबाइल वातावरण में FIDDLE का परीक्षण करना होगा । मैं इस समय नहीं कर सकता।
सुधार - मैंने सिर्फ एक मोबाइल में परीक्षण किया है, यह ठीक काम करता है

Comments

w3schools सबसे अच्छा संसाधन नहीं है, इसलिए मैं developer.mozilla.org/en-US/docs/Web/CSS/%3Aactive

— 23tux

यह Microsoft एज पर टच-सक्षम विंडोज 10 लैपटॉप पर काम नहीं करता है।

— सेपरहेम

उम्म्म्म… सॉरी? जबरदस्त हंसी। जब मैंने इसे पोस्ट किया तो हाँ Microsoft किनारे अभी तक बाहर नहीं था ... मुझे लगता है

— 22:05

यह मोबाइल सफारी पर काम नहीं करता है। नीचे onclick = "" के साथ जवाब हालांकि चाल करता है!

— जेसन गोडसन

यह सब बहुत अच्छा है जब तक कि उपयोगकर्ता बटन को फिर से बंद करने के लिए टैप नहीं करता है और यह तब तक बंद नहीं होगा जब तक उपयोगकर्ता बटन के बाहर कहीं भी टैप नहीं करता है। Chrome देव उपकरण उत्तरदायी दृश्य आज़माएं जहां आपके पास एक स्पर्श सिम्युलेटर है। अगर यह किसी भी तरह शुद्ध सीएसएस में किया जा सकता है, कि बटन पर एक और नल इसे बंद कर देता है, अब यह भयानक होगा!

— लोटेकसून

Answer 2

आप onclick=""hovered तत्व में जोड़ सकते हैं । उसके बाद होवर काम करेगा।

संपादित करें: लेकिन आपको वास्तव में अपने मार्कअप से संबंधित किसी भी शैली को नहीं जोड़ना चाहिए, बस इसे एक विकल्प के रूप में पोस्ट किया है।

Comments

यह मेरे लिए काम किया। LOTUSMS का उत्तर नहीं था - निश्चित नहीं कि क्यों। हो सकता है कि भविष्य में इस पृष्ठ पर आने वाला कोई भी व्यक्ति आत्मज्ञान कर सकता हो

— danyamachine

यह सफारी पर काम करता है onclick="", लेकिन फिर तत्व को कैसे सक्रिय किया जाए? यह पहले स्पर्श के बाद भी हमेशा सक्रिय रहता है, यहाँ तक कि बाहर से छूने पर भी।

— गीगाबाइट्स

अपडेट 2019: onclick = "" अब

— निकाला

Answer 3

मुझे वही परेशानी हुई, माइक्रोसॉफ्ट के एज ब्राउजर वाले मोबाइल डिवाइस में। मैं के साथ समस्या को हल कर सकते हैं: aria-haspopup="true"। यह div और को जोड़ने की जरूरत है :hover, :active, :focusअन्य मोबाइल ब्राउज़र के लिए।

उदाहरण html:

<div class="left_bar" aria-haspopup="true">

सीएसएस:

.left_bar:hover, .left_bar:focus, .left_bar:active{
    left: 0%;
    }

Answer 4

document.addEventListener("touchstart", function() {}, true);

यह स्निपेट टचस्क्रीन के लिए होवर इफेक्ट को सक्षम करेगा

Comments

मुझे लगता है कि कुछ और स्पष्टीकरण के हकदार हैं।

— रोमेन विंसेंट

अच्छा हैक, लेकिन सावधान रहने की जरूरत है: यह अन्य विशिष्ट इंटरैक्शन को तोड़ सकता है।

— स्कैबिट

Answer 5

मैं एक CSS noob हूँ, लेकिन मैंने देखा है कि जब तक यह एक "hoverable" तत्व: छवि, लिंक, बटन के लिए hover टच स्क्रीन के लिए काम करेगा। आप निम्नलिखित ट्रिक का उपयोग करके सीएसएस के साथ यह सब कर सकते हैं।

अपनी div पृष्ठभूमि को div के भीतर एक वास्तविक छवि टैग में बदलें या संपूर्ण div के चारों ओर एक डमी लिंक बनाएं, यह तब होवर के रूप में पंजीकरण करेगा जब आप छवि को स्पर्श करेंगे।

ऐसा करने का अर्थ यह होगा कि आपको अपने शेष पृष्ठ की भी "होवरेबल" होने की आवश्यकता है, इसलिए जब आप छवि के बाहर स्पर्श करते हैं तो यह उस सूचना-स्लाइड को पहचानता है: होवर समाप्त हो गया है। मेरी चाल मेरे सभी अन्य सामग्री डमी लिंक बनाने की है।

यह बहुत सुंदर नहीं है, लेकिन यह काम करता है।

Comments

आप इसे थोड़ा सामान्य कर रहे हैं - विशेषकर पुराने आईफ़ोन hoverएक क्लिक पर लागू नहीं होते हैं (लेकिन वे लागू होते हैं activeऔर focus)। मेरे ज्ञान के लिए, यह किसी वस्तु के "क्लिक करने की क्षमता" पर भी निर्भर नहीं करता है, क्योंकि हर तत्व "क्लिक करने योग्य" है - लेकिन मैं गलत हो सकता हूं, क्योंकि मैंने सभी उपकरणों को वहां से नहीं देखा है, यही कारण है कि यह अच्छा अभ्यास है न केवल अवलोकन, बल्कि प्रलेखन द्वारा जाना।

— थिअर्डमैन

Answer 6

अधिकांश उपकरणों पर, अन्य उत्तर काम करते हैं। मेरे लिए, यह सुनिश्चित करने के लिए उस पर काम किया हर डिवाइस (प्रतिक्रिया) मैं एक लंगर टैग में लपेट करना पड़ा <a>और निम्न जोड़ें: :hover, :focus, :activeके रूप में (इसी क्रम में), साथ ही role="button"और tabIndex="0"।

Answer 7

मुझे लगता है कि यह सरल विधि इस लक्ष्य को प्राप्त कर सकती है। CSS के साथ आप पॉइंटर इवेंट को 'कोई नहीं' के लिए बंद कर सकते हैं फिर कक्षाओं को स्विच करने के लिए jQuery का उपयोग कर सकते हैं।

.item{
   pointer-events:none;
 }

.item.clicked{
   pointer-events:inherit;
 }
 
.item:hover,.item:active{
  /* Your Style On Hover Converted to Tap*/
  background:#000;
}

श्रेणीबद्ध स्विच करने के लिए jQuery का उपयोग करें:

jQuery('.item').click(function(e){
  e.preventDefault();
  $(this).addClass('clicked')l
});

Answer 8

एक सीएसएस केवल उन लोगों के लिए समाधान है जो मोबाइल टचस्क्रीन बटन स्टाइल से परेशान हैं।

यह आपकी होवर-स्टिक / सक्रिय बटन समस्याओं को ठीक करेगा।

body, html {
  width: 600px;
}
p {
  font-size: 20px;
}

button {
  border: none;
  width: 200px;
  height: 60px;
  border-radius: 30px;
  background: #00aeff;
  font-size: 20px;
}

button:active {
  background: black;
  color: white;
}

.delayed {
  transition: all 0.2s;
  transition-delay: 300ms;
}

.delayed:active {
  transition: none;
}

<h1>Sticky styles for better touch screen buttons!</h1>

<button>Normal button</button>

<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>

<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures.   With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely.  This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>

<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>

Answer 9

वैसे मैं उपरोक्त उत्तरों से सहमत हूं लेकिन फिर भी ऐसा करने का एक और तरीका हो सकता है और यह mediaप्रश्नों का उपयोग करके है ।

मान लीजिए कि आप यही करना चाहते हैं:

body.nontouch nav a:hover {
    background: yellow;
}

तब आप इसे मीडिया क्वेरी द्वारा निम्नानुसार कर सकते हैं:

@media(hover: hover) and (pointer: fine) {
    nav a:hover {
        background: yellow;
    }
}

और अधिक जानकारी के लिए आप इस पेज पर जा सकते हैं ।

Comments

यह उत्तर यह नहीं बताता है कि क्लिक कार्यक्षमता कैसे जोड़ें।

— राबर्ट्स