सीएसएस में इसी लेबल पर ट्रिगर इनपुट के लिए होवर क्यों है?

Question

क्या मुझे कुछ याद आ रहा है, या इस उदाहरण का व्यवहार - http://dabblet.com/result/gist/1716833 - वेबकिट्स/एफएक्स में अजीब है?

लेबल के साथ एक इनपुट और निम्नलिखित चयनकर्ता नहीं है:

input:hover + .target { 
    background: red; 
} 

और इस शैली शुरू हो रहा है जब आप labelinput से जुड़ी होवर करें, न केवल input ही। इससे भी अधिक: labelऔर inputlabel में लिपटे के साथ एक अंतर है - यदि आप पहले input पर होवर करते हैं और फिर कर्सर को सीधे .target पर ले जाएं - अजीब होवर लपेटा संस्करण में ट्रिगर नहीं होगा।

और यह केवल फ़ायरफ़ॉक्स और सफारी/क्रोम में पुन: उत्पन्न होता है, लेकिन ओपेरा में यह ठीक है।

तो, सवाल यह है: यदि इस मुद्दे को कहीं चश्मा में वर्णित किया गया है? मुझे कोई उचित स्थान नहीं मिला जो इसका वर्णन करता है और बताता है कि कौन सा व्यवहार सही है।

Answer 1

यह अब HTML spec में है; यह October 2012 WD तक नहीं था कि यह W3C एचटीएमएल 5 (जोर मेरा) को जोड़ा गया है:

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

• एक तत्व उपयोगकर्ता किसी इंगित उपकरण का उपयोग कर इंगित करता है कि: केवल :hover छद्म वर्ग को परिभाषित करने के प्रयोजनों के लिए, एक HTML उपयोगकर्ता एजेंट एक है कि उपयोगकर्ता निर्दिष्ट अगर यह होता है होने के रूप में एक तत्व पर विचार करना चाहिए ।

• एक तत्व जिसमें एक वंशज है जो उपयोगकर्ता पॉइंटिंग डिवाइस का उपयोग करने का संकेत देता है।

• एक तत्व जो label तत्व का लेबल नियंत्रित नियंत्रण है जो वर्तमान में मेल खाता है: होवर।

समान पाठ living spec में दिखाई देता है।

---

मुझे अपनी साइट की संपर्क फ़ॉर्म, जहां label:hover भी किसी भी रूप इनपुट तत्व या तो अपने वंशज या उसके for विशेषता द्वारा संदर्भित है कि पर :hover से चलाता है के पिछले डिजाइन पर कुछ साल पहले यह बहुत ही व्यवहार की खोज की।

यह व्यवहार वास्तव में this bug report में के साथ गेको (फ़ायरफ़ॉक्स के लेआउट इंजन) के हालिया निर्माण में जोड़ा गया था, और इसे वेबकिट many years back में कार्यान्वित किया गया था। जैसा कि आप ध्यान देते हैं, व्यवहार ओपेरा में पुन: उत्पन्न नहीं होता है; ऐसा लगता है कि ओपेरा सॉफ्टवेयर और माइक्रोसॉफ्ट को ज्ञापन नहीं मिला।

सभी मुझे लगता है मैं (मेरे द्वारा इटैलिक टिप्पणी) निश्चित रूप से पता नहीं है कल्पना कि इस व्यवहार किसी भी तरह here है से संबंधित हों में मिल सकते हैं, लेकिन:

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

[...]

चयनकर्ता अगर एक तत्व के माता पिता है कि ':active' या ':hover' है कि राज्य में भी है परिभाषित नहीं करता है। [यह या तो एक तत्व के बच्चे के लिए एक ही परिभाषित करने के लिए प्रकट नहीं होता है।]

नोट: क्योंकि उसके बच्चे को किसी इंगित उपकरण द्वारा नामित किया गया है ':hover' राज्य एक तत्व पर लागू होता है हैं, तो पॉइंटिंग डिवाइस के नीचे नहीं होने वाले तत्व पर लागू करने के लिए ':hover' के लिए यह संभव है।

लेकिन क्या मैं निष्कर्ष निकाल सकते हैं कि इस व्यवहार कम से कम छिपकली और WebKit में डिजाइन द्वारा है।

---

के बारे में आप यहाँ क्या राज्य:

इससे भी अधिक: वहाँ for साथ label और input एक label में लिपटे के बीच एक अंतर है - अगर आप पहले और उसके बाद इस कदम पर input मंडराना था कर्सर सीधे .target पर - अजीब होवर लपेटा संस्करण में ट्रिगर नहीं होगा।

उपरोक्त व्यवहार को देखते हुए, यहां केवल एकमात्र संभावना यह है कि आपको बस कैस्केड द्वारा काटा गया है।

असल में, इस नियम:,

/* 1 class, 1 pseudo-class   -> specificity = (0, 2, 0) */ 
.target:hover { 
    background: lime; 
} 

लागू ब्राउज़रों में

तो, अपने पहले चेकबॉक्स हमेशा हॉवर पर लाल हो जाएगा द्वारा label.target है क्योंकि:

/* 1 type, 1 pseudo-class, 1 class -> specificity = (0, 2, 1) */ 
input:hover + .target { 
    background: red; 
} 

इस नियम की तुलना में अधिक विशिष्ट है अधिक विशिष्ट नियम हमेशा प्राथमिकता लेता है। दूसरा चेकबॉक्स span.target के बाद होता है, इसलिए इस व्यवहार में से कोई भी लागू नहीं होता है; कर्सर span.target से अधिक होने पर केवल दूसरा नियम प्रभावी हो सकता है।