: सीएसएस छद्म वर्ग या कुछ इसी तरह का स्पर्श?

Question 1

मैं एक बटन बनाने की कोशिश कर रहा हूं, जैसे कि जब उपयोगकर्ता उस पर क्लिक करता है, तो वह अपनी शैली को बदल देता है जबकि माउस बटन को दबाए रखा जाता है। मैं यह भी चाहता हूं कि यदि मोबाइल ब्राउज़र में इसे छुआ जाए तो यह इसी तरह से अपनी शैली को बदल सकता है। मेरे लिए स्पष्ट रूप से स्पष्ट बात सीएसएस का उपयोग करना था: सक्रिय छद्म वर्ग, लेकिन यह काम नहीं किया। मैंने कोशिश की: फोकस, और यह भी काम नहीं किया। मैंने कोशिश की: मंडराना, और यह काम करने लगा, लेकिन मैंने अपनी उंगली बटन से हटाने के बाद शैली को रखा। ये सभी अवलोकन एक iPhone 4 और एक Droid 2 पर थे।

क्या मोबाइल ब्राउज़र (iPhone, iPad, Android, और उम्मीद है कि दूसरों) पर प्रभाव को दोहराने का कोई तरीका है? अभी के लिए, मैं कुछ इस तरह कर रहा हूँ:

<style type="text/css">
    #testButton {
        background: #dddddd;
    }
    #testButton:active, #testButton.active {
        background: #aaaaaa;
    }
</style>

...

<button type="button" id="testButton">test</button>

...

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
    $("*").live("touchstart", function() {
      $(this).addClass("active");
    }).live("touchend", function() {
      $(this).removeClass("active");
    });
</script>

: सक्रिय छद्म वर्ग डेस्कटॉप ब्राउज़रों के लिए है, और सक्रिय वर्ग स्पर्श ब्राउज़रों के लिए है।

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

Question 2

:touchW3C विनिर्देशों में ऐसी कोई बात नहीं है , http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active काम करना चाहिए, मुझे लगता है।

सही ढंग से कार्य करने के लिए :active/ :hoverछद्म वर्ग पर आदेश महत्वपूर्ण है।

यहाँ उस उपरोक्त लिंक से एक उद्धरण दिया गया है

उपयोगकर्ता क्रियाओं के जवाब में इंटरएक्टिव उपयोगकर्ता एजेंट कभी-कभी रेंडरिंग को बदलते हैं। सीएसएस सामान्य मामलों के लिए तीन छद्म कक्षाएं प्रदान करता है:

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

: सक्रिय छद्म वर्ग लागू होता है, जबकि एक तत्व उपयोगकर्ता द्वारा सक्रिय किया जा रहा है। उदाहरण के लिए, जिस समय उपयोगकर्ता माउस बटन दबाता है और उसे छोड़ता है।

फोकस: छद्म वर्ग लागू होता है, जबकि एक तत्व में फोकस होता है (कीबोर्ड ईवेंट या पाठ इनपुट के अन्य रूपों को स्वीकार करता है)।

Question 3

चूंकि मोबाइल हॉवर प्रतिक्रिया नहीं देता है, मैं चाहता हूं कि एक उपयोगकर्ता के रूप में, जब कोई लिंक टैप किया जाता है, तो तत्काल प्रतिक्रिया देखें। मैंने देखा कि -webkit-tap-highlight-colorप्रतिक्रिया करने के लिए सबसे तेज है (व्यक्तिपरक)।

निम्नलिखित को अपने शरीर में जोड़ें और आपके लिंक का एक नल प्रभाव होगा।

body {
    -webkit-tap-highlight-color: #ccc;
}

Question 4

मुझे मोबाइल टचस्क्रीन बटन स्टाइल करने में परेशानी हो रही थी। यह आपकी होवर-स्टिक / सक्रिय बटन समस्याओं को ठीक करेगा।

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>

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