माता-पिता के होवर होने पर बाल तत्व के सीएसएस को बदलना

Question

सबसे पहले, मैं यह मान रहा हूं कि यह CSS3 के लिए बहुत जटिल है, लेकिन अगर वहाँ कहीं कोई समाधान है, तो मैं इसके बजाय जाना पसंद करूंगा।

HTML बहुत सीधा है।

<div class="parent">
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <div class="child">
        Text Block 2
    </div>
</div>

बाल दिवस प्रदर्शित करने के लिए सेट है: कोई नहीं; डिफ़ॉल्ट रूप से, लेकिन फिर प्रदर्शित करने के लिए बदलता है: ब्लॉक; जब माता-पिता div पर माउस hovered है। समस्या यह है कि यह मार्कअप मेरी साइट पर कई स्थानों पर दिखाई देता है, और मैं केवल यही चाहता हूं कि यदि बच्चा माता-पिता के ऊपर है तो उसे प्रदर्शित किया जाए, और यदि माउस किसी अन्य माता-पिता से अधिक है (वे सभी एक ही वर्ग के हैं) नाम और आईडी नहीं)।

मैंने उपयोग करने की कोशिश की है $(this)और .children()कोई फायदा नहीं हुआ।

$('.parent').hover(function(){
            $(this).children('.child').css("display","block");
        }, function() {
            $(this).children('.child').css("display","none");
        });

Answer 1

सिर्फ सीएसएस का उपयोग क्यों नहीं?

.parent:hover .child, .parent.hover .child { display: block; }

और फिर IE6 के लिए JS जोड़ें (उदाहरण के लिए एक सशर्त टिप्पणी के अंदर) जो समर्थन नहीं करता है: ठीक से होवर करें:

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

यहाँ एक त्वरित उदाहरण है: फिडल

Comments

वह कोड मेरे लिए काम नहीं कर रहा है। क्या इसे ".parent.hover" और ".parent: hover" कहना चाहिए ?? मामला जो मैंने पहले कभी नहीं देखा है। और क्या अल्पविराम से कई चयनकर्ताओं को एक ही शैली का संकेत नहीं मिलता है? मैं नहीं देखता कि यहाँ कैसे मदद मिलती है। उस सीएसएस के बारे में थोड़ी और जानकारी, पक्ष पक्ष 0 =]

— हार्टले ब्रॉडी

:hoverCSS2 ( यहाँ युक्ति ) द्वारा परिभाषित "डायनेमिक छद्म-कक्षाएं" में से एक है । यहाँ एक त्वरित उदाहरण है: http://jsfiddle.net/5FLr4/ । इससे मेरा काम बनता है।

— ली

बहुत बहुत धन्यवाद! मैं वास्तव में कुछ रिश्तेदार स्थिति है कि देखने से बाहर बाल पाठ धक्का था ... दोह! >। <मैं मदद की सराहना!

— हार्टले ब्रॉडी

जाहिरा तौर पर यह .child के लिए काम नहीं करेगा :: - यदि आप बाल तत्व के अंदर स्क्रॉलबार के हाइलाइट को बदलना चाहते हैं, तो वेबकिट-स्क्रॉलबार-थंब।

— 3

.parent:not(:hover) .child { display: none; }मेरे लिए अच्छी तरह से काम करने लगता है, हालांकि मैं निश्चित रूप से IE6 के बारे में चिंतित नहीं हूं। लेकिन इस तरह मैं इसे उन तत्वों पर उपयोग कर सकता हूं जो मुझे एक समान displayसंपत्ति नहीं चाहिए ।

— ब्लेयर कोनोली

Answer 2

जावास्क्रिप्ट या jquery का उपयोग करने की आवश्यकता नहीं है, सीएसएस पर्याप्त है:

.child{ display:none; }
.parent:hover .child{ display:block; }

डेमो देखें

Answer 3

का उपयोग करें toggleClass()।

$('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});

colorक्लास कहाँ है आप अपनी इच्छानुसार व्यवहार को प्राप्त करने के लिए वर्ग को स्टाइल कर सकते हैं। उदाहरण दर्शाता है कि माउस को अंदर और बाहर किस तरह से जोड़ा और हटाया जाता है।

कार्य उदाहरण यहां देखें ।

Answer 4

.parent:hover > .child {
    /*do anything with this child*/
}

Answer 5

स्टीफन का जवाब सही है लेकिन यहाँ उनके जवाब का मेरा अनुकूलन है:

एचटीएमएल

<div class="parent">
    <p> parent 1 </p>
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <p> parent 2 </p>
    <div class="child">
        Text Block 2
    </div>
</div>

सीएसएस

.parent { width: 100px; min-height: 100px; color: red; }
.child { width: 50px; min-height: 20px; color: blue; display: none; }
.parent:hover .child, .parent.hover .child { display: block; }

jQuery

//this is only necessary for IE and should be in a conditional comment

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

आप इस उदाहरण को jsFiddle पर काम करते हुए देख सकते हैं ।

Answer 6

मुझे लगता है कि मुझे लगता है कि एक बेहतर समाधान है, क्योंकि यह अधिक स्तरों तक स्केलेबल है, जैसा कि कई लोग चाहते थे, केवल दो या तीन ही नहीं।

मैं सीमाओं का उपयोग करता हूं, लेकिन यह पृष्ठभूमि-रंग की तरह, वॉटएवर शैली के साथ भी किया जा सकता है।

सीमा के साथ, विचार यह है:

• एक अलग बॉर्डर कलर केवल एक डिव, जिस पर माउस है, किसी भी माता-पिता पर नहीं, किसी बच्चे पर नहीं, इसलिए इसे केवल डिव बॉर्डर को एक अलग रंग में देखा जा सकता है जबकि बाकी सफेद पर रहता है।

आप इसे यहाँ पर देख सकते हैं: http://jsbin.com/ubiyo3/13

और यहाँ कोड है:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hierarchie Borders MarkUp</title>
<style>

  .parent { display: block; position: relative; z-index: 0;
            height: auto; width: auto; padding: 25px;
          }

  .parent-bg { display: block; height: 100%; width: 100%; 
               position: absolute; top: 0px; left: 0px; 
               border: 1px solid white; z-index: 0; 
             }
  .parent-bg:hover { border: 1px solid red; }

  .child { display: block; position: relative; z-index: 1; 
           height: auto; width: auto; padding: 25px;
         }

  .child-bg { display: block; height: 100%; width: 100%; 
              position: absolute; top: 0px; left: 0px; 
              border: 1px solid white; z-index: 0; 
            }
  .child-bg:hover { border: 1px solid red; }

  .grandson { display: block; position: relative; z-index: 2; 
              height: auto; width: auto; padding: 25px;
            }

  .grandson-bg { display: block; height: 100%; width: 100%; 
                 position: absolute; top: 0px; left: 0px; 
                 border: 1px solid white; z-index: 0; 
               }
  .grandson-bg:hover { border: 1px solid red; }

</style>
</head>
<body>
  <div class="parent">
    Parent
    <div class="child">
      Child
      <div class="grandson">
        Grandson
        <div class="grandson-bg"></div>
      </div>
      <div class="child-bg"></div>
    </div>
    <div class="parent-bg"></div>
  </div>
</body>
</html>

Comments

यह वह नहीं करता जो सवाल पूछा गया था। यह उस तत्व के चारों ओर की सीमा को बदल देता है, जिस पर हॉवर किया जाता है। बाल तत्व के आसपास की सीमा नहीं।

— जेनिवरेन

Answer 7

यदि आप ट्विटर बूटस्ट्रैप स्टाइल और बेस JS का उपयोग ड्रॉप डाउन मेनू के लिए कर रहे हैं:

.child{ display:none; }
.parent:hover .child{ display:block; }

यह स्टिकी-ड्रॉपडाउन बनाने के लिए लापता टुकड़ा है (जो कष्टप्रद नहीं हैं)

• व्यवहार यह है:
  1. क्लिक करने पर खुले रहें, पृष्ठ पर कहीं और क्लिक करने पर बंद करें
  2. जब माउस मेनू के तत्वों से बाहर स्क्रॉल करता है तो स्वचालित रूप से बंद हो जाता है।

Answer 8

निश्चित नहीं है कि ऐसा करने के लिए भयानक कारण हैं या नहीं, लेकिन यह मेरे साथ क्रोम / फ़ायरफ़ॉक्स के नवीनतम संस्करण पर काम करने के लिए लगता है, बिना किसी दृश्य प्रदर्शन समस्या के पेज पर बहुत सारे तत्वों के साथ।

*:not(:hover)>.parent-hover-show{
    display:none;
}

लेकिन इस तरह, आपको बस parent-hover-showएक तत्व को लागू करने की आवश्यकता है और बाकी का ध्यान रखा गया है, और आप जो भी डिफ़ॉल्ट प्रदर्शन प्रकार चाहते हैं, उसे हमेशा "ब्लॉक" किए बिना या प्रत्येक प्रकार के लिए कई कक्षाएं बनाकर रख सकते हैं।

Answer 9

इसे css से बदलने के लिए आपको चाइल्ड क्लास सेट करने की जरूरत नहीं है

.parent > div:nth-child(1) { display:none; }
.parent:hover > div:nth-child(1) { display: block; }