जब एक तत्व मँडरा जाता है तो अन्य तत्वों को कैसे प्रभावित किया जाए

Question

जब मैं कुछ करना चाहता हूँ तो एक divमंडराना होता है, यह दूसरे के गुणों को प्रभावित करता है div।

उदाहरण के लिए, में इस JSFiddle डेमो , जब आप मंडराना से अधिक #cubeयह परिवर्तन background-colorलेकिन क्या मैं चाहता हूँ जब मैं मंडराना से अधिक है कि है #container, #cubeप्रभावित होता है।

div {
  outline: 1px solid red;
}
#container {
  width: 200px;
  height: 30px;
}
#cube {
  width: 30px;
  height: 100%;
  background-color: red;
}
#cube:hover {
  width: 30px;
  height: 100%;
  background-color: blue;
}

<div id="container">

  <div id="cube">
  </div>

</div>

Answer 1

यदि घन सीधे कंटेनर के अंदर है:

#container:hover > #cube { background-color: yellow; }

यदि घन कंटेनर के बाद (टैग बंद करने के बाद) कंटेनर है:

#container:hover + #cube { background-color: yellow; }

यदि घन कंटेनर के अंदर कहीं है:

#container:hover #cube { background-color: yellow; }

यदि घन कंटेनर का सहोदर है:

#container:hover ~ #cube { background-color: yellow; }

Comments

~'क्यूब के लिए डोम में कंटेनर के बाद कहीं है और एक अभिभावक को साझा करता है' के लिए सामान्य भाई

— कंबाइनेटर को मत भूलना

यह बहुत मजेदार है। क्या कोई ऐसा स्रोत है जहाँ मैं उसके बारे में अधिक जानकारी पा सकता हूँ? क्या यह सभी ब्राउज़र द्वारा समर्थित है, क्या यह CSS3 है? उस बारे में कुछ और जानकारी के लिए बहुत अच्छा होगा। बहुत बहुत धन्यवाद!

— बेनामी

+1 शानदार उत्तर @ माइक। तो क्या #containerअगले है #cube, यानी #containerइस प्रकार है #cube?

— पीटरका

यदि होवरेड तत्व कंटेनर के अंदर है (तो क्या हम प्रभावित होना चाहते हैं) क्या करें ??? उदाहरण के लिए: # क्यूब: होवर #container {कुछ CSS इफेक्ट्स}

— हनज़ल्लाह अफ़गन

अच्छा उत्तर !! जब मैं बच्चे को मँडराता हूँ तो मैं माता-पिता को बदलना चाहता हूँ। मुझे लगता है कि इसके लिए कोई चयनकर्ता नहीं है।

— मिकेल

Answer 2

इस विशेष उदाहरण में, आप उपयोग कर सकते हैं:

#container:hover #cube {
    background-color: yellow;   
}

यह उदाहरण केवल तब से काम करता है जब cubeबच्चा है container। अधिक जटिल परिदृश्यों के लिए, आपको अलग-अलग CSS का उपयोग करना होगा, या जावास्क्रिप्ट का उपयोग करना होगा।

Answer 3

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

यह वास्तव में आसानी से सीएसएस flexbox मॉडल का उपयोग किया जा सकता है, की स्थापना द्वारा flex-directionकरने के लिए reverse, ताकि तत्वों एक वे डोम में हैं से विपरीत क्रम में प्रदर्शित होते हैं। ऊपर स्क्रीनशॉट एक ऐसे विजेट से है, जिसे शुद्ध CSS के साथ लागू किया गया है।

फ्लेक्सबॉक्स 95% आधुनिक ब्राउज़रों द्वारा बहुत अच्छी तरह से समर्थित है।

.rating {
  display: flex;
  flex-direction: row-reverse;
  width: 9rem;
}
.rating div {
  flex: 1;
  align-self: flex-end;
  background-color: black;
  border: 0.1rem solid white;
}
.rating div:hover {
  background-color: lightblue;
}
.rating div[data-rating="1"] {
  height: 5rem;
}
.rating div[data-rating="2"] {
  height: 4rem;
}
.rating div[data-rating="3"] {
  height: 3rem;
}
.rating div[data-rating="4"] {
  height: 2rem;
}
.rating div[data-rating="5"] {
  height: 1rem;
}
.rating div:hover ~ div {
  background-color: lightblue;
}

<div class="rating">
  <div data-rating="1"></div>
  <div data-rating="2"></div>
  <div data-rating="3"></div>
  <div data-rating="4"></div>
  <div data-rating="5"></div>
</div>

Comments

क्या इसे संपादित किया जा सकता है ताकि माउस को 1 बार से दूसरे पर ले जाते समय हाइलाइट गायब न हो? चमकती थोड़ी विचलित है।

— सेरेब्रस

@Cerbrus: माउस के सलाखों के बीच होने पर एक समाधान जोड़ा जाता है जो होवर को छिपाता नहीं है। नकारात्मक पक्ष यह है कि सलाखों की चौड़ाई अब बराबर नहीं है।

— डैन डस्केलस्क्यू

अपने पहले स्निपेट में इसे आज़माएँ: ऑन .rating div, मार्जिन को हटा दें, और जोड़ देंborder-right: 4px solid white;

— Cerbrus

फ्लेक्स दिशा (आईई के लिए अच्छी तरह से समर्थित नहीं है) या 1) डिफ़ॉल्ट रूप से काला 2) कंटेनर पर माउस पर सभी नीला 3) बार होवर पर अगले भाई के लिए काला :)

— स्टीफन मैथिस

मैंने इस फिडेल को बनाया (जो कम से कम मेरे लिए था) इसने यहां जो चल रहा था, उस पर थोड़ा और अधिक ध्यान दिया। jsfiddle.net/maxshuty/cj55y33p/3

— मैक्सशूट

Answer 4

उनके मददगार पोस्ट के लिए माइक और रॉबर्ट को बहुत धन्यवाद!

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

मैं ब्राउज़र के दाईं ओर एक बॉक्स में परिभाषाओं को प्रदर्शित करना चाहता था क्योंकि मेरे उपयोगकर्ता मेरी साइट पर और :hoverहाइलाइट किए गए शब्दों के माध्यम से पढ़ते हैं; इसलिए, मैं नहीं चाहता था कि 'परिभाषा' तत्व 'पाठ' तत्व के अंदर प्रदर्शित हो।

मैंने लगभग छोड़ दिया और बस अपने पेज पर जावास्क्रिप्ट जोड़ दिया, लेकिन यह भविष्य का खतरा है! हमें सीएसएस और एचटीएमएल से बैक सास के साथ नहीं कहना चाहिए, हमें यह बताना होगा कि हमें अपने प्रभाव को प्राप्त करने के लिए हमारे तत्वों को कहां रखना है! अंत में हमने समझौता किया।

जबकि फ़ाइल में वास्तविक HTML तत्वों :hoverको एक दूसरे के लिए वैध लक्ष्य होने के लिए या तो निहित या निहित होना चाहिए , css positionविशेषता का उपयोग किसी भी तत्व को प्रदर्शित करने के लिए किया जा सकता है जहाँ आप कभी भी चाहें। मैंने स्थिति का उपयोग किया: अपनी :hoverकार्रवाई का लक्ष्य निर्धारित करने के लिए जहां मैं इसे HTML दस्तावेज़ में इसके स्थान की परवाह किए बिना उपयोगकर्ता की स्क्रीन पर चाहता था।

HTML:

<div id="explainBox" class="explainBox"> /*Common parent*/

  <a class="defP" id="light" href="http://en.wikipedia.or/wiki/Light">Light                            /*highlighted term in text*/
  </a> is as ubiquitous as it is mysterious. /*plain text*/

  <div id="definitions"> /*Container for :hover-displayed definitions*/
    <p class="def" id="light"> /*example definition entry*/ Light:
      <br/>Short Answer: The type of energy you see
    </p>
  </div>

</div>

सीएसएस:

/*read: "when user hovers over #light somewhere inside #explainBox
    set display to inline-block for #light directly inside of #definitions.*/

#explainBox #light:hover~#definitions>#light {
  display: inline-block;
}

.def {
  display: none;
}

#definitions {
  background-color: black;
  position: fixed;
  /*position attribute*/
  top: 5em;
  /*position attribute*/
  right: 2em;
  /*position attribute*/
  width: 20em;
  height: 30em;
  border: 1px solid orange;
  border-radius: 12px;
  padding: 10px;
}

इस उदाहरण में :hoverएक तत्व से एक कमांड का लक्ष्य या #explainBoxतो होना चाहिए या #explainBoxभीतर भी होना चाहिए #explainBox। #Definitions को सौंपी गई स्थिति विशेषताएँ इसे इच्छित स्थान (बाहरी #explainBox) में प्रकट होने के लिए बाध्य करती हैं, भले ही यह तकनीकी रूप से HTML दस्तावेज़ के भीतर अवांछित स्थिति में स्थित हो।

मैं समझता हूं कि इसे एक #idसे अधिक HTML तत्व के लिए उपयोग करने के लिए बुरा रूप माना जाता है ; हालांकि, इस मामले #lightमें विशिष्ट #idतत्वों में उनके संबंधित पदों के कारण स्वतंत्र रूप से वर्णित किया जा सकता है । क्या id #lightइस मामले में कोई कारण नहीं है ?

Comments

इस तरह के एक छोटे बिंदु के लिए लंबा जवाब, लेकिन यहाँ एक jsfiddle है jsfiddle.net/ubershmekel/bWgq6/1

— ubershmekel

जब आप एक से IDअधिक बार उपयोग करते हैं तो कुछ ब्राउजर फ्रीक हो जाएंगे । बस एक का उपयोग करें class।

— सेर्गे सगन

Answer 5

केवल इसने मेरे लिए काम किया:

#container:hover .cube { background-color: yellow; }

.cubeCssClass of कहाँ है #cube।

फ़ायरफ़ॉक्स , क्रोम और एज में परीक्षण किया गया ।

Answer 6

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

इसके लिए, मैं कस्टम गुणों (सीएसएस चर) के उपयोग पर भरोसा करूंगा। जैसा कि हम विनिर्देश में पढ़ सकते हैं :

कस्टम गुण सामान्य गुण हैं , इसलिए उन्हें किसी भी तत्व पर घोषित किया जा सकता है, सामान्य विरासत और कैस्केड नियमों के साथ हल किया जाता है ...

यह विचार मुख्य तत्वों के भीतर कस्टम गुणों को परिभाषित करने और उन्हें बाल तत्वों को स्टाइल करने के लिए उपयोग करना है और चूंकि इन गुणों को विरासत में मिला है, हमें बस मुख्य तत्व के भीतर उन्हें बदलने की आवश्यकता है।

यहाँ एक उदाहरण है:

#container {
  width: 200px;
  height: 30px;
  border: 1px solid var(--c);
  --c:red;
}
#container:hover {
  --c:blue;
}
#container > div {
  width: 30px;
  height: 100%;
  background-color: var(--c);
}

<div id="container">
  <div>
  </div>
</div>

होवर के साथ संयुक्त विशिष्ट चयनकर्ता का उपयोग करने से बेहतर क्यों हो सकता है?

मैं कम से कम 2 कारण प्रदान कर सकता हूं जो इस पद्धति को विचार करने के लिए अच्छा बनाते हैं:

1. यदि हमारे पास कई नेस्टेड तत्व हैं जो समान शैलियों को साझा करते हैं, तो यह हमें उन सभी को हॉवर पर लक्षित करने के लिए जटिल चयनकर्ता से बचाएगा। कस्टम गुणों का उपयोग करते हुए, हम मूल तत्व पर मँडराते समय केवल मान बदलते हैं।
2. कस्टम संपत्ति का उपयोग किसी भी संपत्ति के मूल्य को बदलने के लिए किया जा सकता है और इसका आंशिक मूल्य भी। उदाहरण के लिए हम एक रंग के लिए एक कस्टम गुण को परिभाषित करने और हम एक के भीतर उपयोग कर सकते हैं border, linear-gradient, background-color, box-shadowआदि यह हम सभी को हॉवर पर इन गुणों reseting से बचने जाएगा।

यहाँ एक और अधिक जटिल उदाहरण है:

.container {
  --c:red;
  width:400px;
  display:flex;
  border:1px solid var(--c);
  justify-content:space-between;
  padding:5px;
  background:linear-gradient(var(--c),var(--c)) 0 50%/100% 3px no-repeat;
}
.box {
  width:30%;
  background:var(--c);
  box-shadow:0px 0px 5px var(--c);
  position:relative;
}
.box:before {
  content:"A";
  display:block;
  width:15px;
  margin:0 auto;
  height:100%;
  color:var(--c);
  background:#fff;
}

/*Hover*/
.container:hover {
  --c:blue;
}

<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>

जैसा कि हम ऊपर देख सकते हैं, हमें विभिन्न तत्वों के कई गुणों को बदलने के लिए केवल एक सीएसएस घोषणा की आवश्यकता है ।