क्या इसके विपरीत सीएसएस छद्म वर्ग है: होवर?

Question

निर्दिष्ट करने के लिए सीएसएस में एक छद्म वर्ग है

:not(:hover)

या यह कि किसी आइटम को निर्दिष्ट करने का एकमात्र तरीका है जो हॉवर नहीं किया जा रहा है?

मैं कई CSS3 संदर्भों के माध्यम से चला गया, और मुझे इसके विपरीत को निर्दिष्ट करने के लिए CSS छद्म वर्ग का कोई उल्लेख नहीं है: होवर।

Comments

इसके बजाय element:not(:hover)उपयोग करें element।

— lmgonzalves

@lmgonzalves जो काम नहीं करेगा; यह शैली को होवरेड और नॉन-होवर दोनों अवस्थाओं में लागू करेगा।

— रॉकपेपर लैज- इसे या कास्केट

क्यों नहीं :not(:hover)?

— ओरोल

@ ऑरिओल केवल इसलिए कि यह एक गैर-नकारात्मक छद्म वर्ग के रूप में साफ नहीं है और क्योंकि यह उस उद्देश्य के लिए डिज़ाइन किए गए छद्म वर्ग की तुलना में कम्प्यूटेशनल रूप से अधिक महंगा हो सकता है।

— रॉकपेपर लैज- इसे या कास्केट

Answer 1

हाँ, उपयोग करें :not(:hover)

.child:not(:hover){
  opacity: 0.3;
}

jsBin डेमो

एक और उदाहरण; मुझे लगता है कि आप चाहते हैं: "जब एक मँडरा हो, तो अन्य सभी तत्वों को मंद करें" ।

यदि मेरी धारणा सही है, और आपके सभी चयनकर्ता एक ही माता-पिता के अंदर हैं:

.parent:hover .child{
    opacity: 0.2;      // Dim all other elements
}
.child:hover{
   opacity: 1;         // Not the hovered one
}

.child{
  display:inline-block;
  background:#000;
  border:1px solid #fff;
  width: 50px;
  height: 50px;
  transition: 0.4s;
}

.parent:hover .child{
  opacity: 0.3;
}
.parent .child:hover{
  opacity: 1;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

अन्यथा ... बस डिफ़ॉल्ट तर्क का उपयोग करें:

.child{
   opacity: 0.2;
}
.child:hover{
   opacity: 1;
}

Comments

आपका पहला वाक्य (यह सही है!) जवाब की तरह लगता है। धन्यवाद! मुझे एक उपयुक्त सीएसएस छद्म वर्ग नहीं मिला, क्योंकि यह (अभी तक) मौजूद नहीं होना चाहिए। आपके द्वारा दिए गए उदाहरण उस पर लागू नहीं होते हैं जो मैं काम कर रहा हूं, लेकिन वे बहुत उपयोगी और उपयोगी होते हैं, भले ही। मुझे आश्चर्य है कि पहला उदाहरण कितना महंगा होगा, क्योंकि यह लगभग हर चीज से मेल खाता है। कोई विचार?

— रॉकपैपरलज़- इसे 22:14 पर कास्केट

@RockPaperLizard अच्छी तरह से, यदि आप 1000 बाल तत्वों का उपयोग करते हैं तो im थोड़ा धीमा हो सकता है jsbin.com/hazega/1/edit?html,css,output अन्यथा, 100, 200 तत्व वास्तव में ठीक काम करना चाहिए।

— रोको सी। बुल्जन

धन्यवाद। के लिए :not(:disabled)भी काम करता है और मैं एक टन अन्य इसी तरह की विशेषताओं मान।

— नो रिफंड्स नो रिटर्न

Answer 2

ऐसा कोई छद्म वर्ग नहीं है। जब आप सिर्फ उपयोग कर सकते हैं, तो होने की आवश्यकता नहीं है :not(:hover)। :not()छद्म वर्ग का पूरा बिंदु लेखकों को हर मौजूदा (और भविष्य) गतिशील छद्म वर्ग के अलग-अलग नकारों को निर्दिष्ट किए बिना नकारात्मक लिखने की अनुमति देना है जहां एक तत्व केवल छद्म वर्ग से मेल खा सकता है या मेल नहीं खा सकता है।

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

तर्क है कि इस तरह के एक छद्म वर्ग कम्प्यूटेशनल रूप से कम महंगा होगा बहुत कमजोर है। इस तरह के छद्म वर्ग का सबसे भोली कार्यान्वयन एक शाब्दिक :not(:hover)जाँच होगी, जो बेहतर नहीं होगी। किसी भी अधिक जटिल या अनुकूलित कार्यान्वयन और आप विक्रेताओं से एक छद्म वर्ग को लागू करने के लिए कह रहे हैं जो या तो तेजी से या उससे भी तेज है :not(:hover), कुछ ऐसा जो पहले से ही असामान्य रूप से उपयोग के मामले में पर्याप्त है अन्य विकल्पों पर विचार करना जैसे कि आप कैस्केडिंग और :not(:hover)(के लिए) जब भी कैस्केडिंग एक विकल्प नहीं है) जिसे आपने आसानी से एक्सेस किया है। यह केवल अनुमान लगाने, लागू करने और कम से कम एक अन्य मौजूदा विधि के लिए एक विकल्प का परीक्षण करने के लिए समय और प्रयास को सही नहीं ठहराता है जो 100% कार्यात्मक रूप से समतुल्य है (और एक जो लागू होता है) कम से कम80% परिदृश्य)। और इस तरह के छद्म वर्ग के नामकरण का मुद्दा भी है - आपने इसके लिए कोई नाम प्रस्तावित नहीं किया है, और मैं एक अच्छे व्यक्ति के बारे में भी नहीं सोच सकता। :not-hoverकेवल दो बाइट्स से छोटा है और टाइप करने के लिए केवल मामूली कम काम है। अगर कुछ भी, यह संभावित रूप से अधिक भ्रामक है :not(:hover)।

आप विशिष्टता के बारे में चिंतित रहे हैं, तो ध्यान दें कि छद्म वर्ग ही विशिष्टता के लिए नहीं गिना जाता है; केवल इसका सबसे विशिष्ट तर्क है । और समान रूप से विशिष्ट हैं। तो विशिष्टता भी कोई मुद्दा नहीं है।:not():not(:hover):hover

यदि आप ब्राउज़र समर्थन के बारे में चिंतित हैं, तो इस तरह का एक छद्म वर्ग, यदि पेश किया गया है, तो संभवतः साथ :not()या साथ ही चयनकर्ताओं के बाद के स्तर में पेश किया गया होगा , क्योंकि यह CSS2 में दिखाई नहीं दिया :hoverथा (जहां पहली बार 17 साल से अधिक पेश किया गया था पहले, और पहली बार IE4 में लागू किया गया एक और साल पहले)। बाद के स्तर में इसका परिचय देना निरर्थक होगा क्योंकि लेखक बस :not(:hover)तब तक उपयोग जारी रखने के लिए मजबूर होंगे जब तक कि ब्राउज़र इस नए छद्म वर्ग को किसी भी तरह से लागू करना शुरू नहीं करते हैं, और उनके पास स्विच करने का कोई कारण नहीं होगा।

ध्यान दें कि यह निम्न प्रश्न के समान नहीं है, जो घटनाओं बनाम राज्यों के बारे में बात करता है (यह मूल रूप से इसके :focusबजाय :hover, लेकिन एक ही सिद्धांत के बारे में लागू होता है): क्या सीएसएस में एक है: धब्बा चयनकर्ता (छद्म वर्ग)?

Answer 3

यदि आप किसी अन्य चीज़ पर केवल मंडराने पर कुछ प्रदर्शित करना चाहते हैं, तो आप उपयोग कर सकते हैं

selector:not(:hover)

इस तरह:

section{
   font-size:3em;
}

div:not(:hover) + section{
 display:none;
}

<div>Hover on me</div>

<section>Peek A Boo!</section>

उपयोग करते समय कई असामान्य प्रभाव और परिणाम हैं :not()जिन्हें आपको ध्यान में रखना चाहिए:

• :not(:not(...)), :not(p::before)संभव नहीं है
• :not(*) जाहिर है कभी लागू नहीं होगा
• :not(.foo)कुछ भी मेल नहीं खाएगा .foo, जैसे टैग <HTML>और<body>
• एक नियम की विशिष्टता को बढ़ाता है, उदाहरण के लिए: #foo:not(#bar)सरल के समान तत्व से मेल खाएगा #foo, लेकिन इसकी उच्च विशिष्टता है।

andसाथ संचालन :not:

• तत्व <div>और <span>तत्व नहीं हैं: body :not(div):not(span){}

orऑपरेशन के साथ :not, यह अभी तक अच्छी तरह से समर्थित नहीं है।

• ऐसे तत्व जो .crazyया नहीं हैं .fancy:body :not(.crazy, .fancy){}

स्रोत MDN

Answer 4

a {
  /*styles*/
} 

एक सामान्य (नॉन होवरड लिंक) है

a:hover {
  /*styles*/
} 

एक मंडराना लिंक है

Comments

यह सटीक नहीं है। जब तक दूसरा निर्दिष्ट नहीं किया जाता है, तब तक पहला आइटम शैली का होगा, जब दोनों मँडराते हैं और मँडराते नहीं हैं। भले ही, दोनों राज्यों में पहला लागू किया गया हो, और दूसरा सिर्फ दो राज्यों में से एक में ओवरराइड करेगा।

— RockPaperLz- इसे मास्क या कास्केट

आप उस बारे में सही हैं। लेकिन यह है कि यह किया जाता है और सीएसएस के साथ इसे करने का एकमात्र तरीका भी है। यह वास्तव में क्या है जिसे आप प्राप्त करना चाहते हैं?

— निकोला_वाड

धन्यवाद। मैंने एक टिप्पणी जोड़ी है जो आपके प्रश्न का उत्तर मुख्य प्रश्न अनुभाग में देती है क्योंकि एक अन्य SO उपयोगकर्ता ने आपसे भी यही प्रश्न पूछा था।

— RockPaperLz-