अन्य सभी तत्वों की शैली बदलें जब एक तत्व hovered है

Question

चलो कहते हैं कि मैं एक ही डोम स्तर पर divs का एक समूह है करते हैं। जब मैं एक से अधिक होवर करता हूं, तो मैं चाहता हूं कि सभी दूसरों को स्टाइल बदलना पड़े (यानी अस्पष्टता या परिवर्तन पृष्ठभूमि को कम करें), जबकि जो भी ढंका हुआ है वही रहता है।

मैं + या ~ चयनकर्ताओं का उपयोग नहीं कर सकता, क्योंकि मुझे इसे सभी भाई बहनों का चयन करने की आवश्यकता है, न केवल सीधे निकट या केवल निम्नलिखित भाई बहनें। असल में जो मैं खोज रहा हूं वह है "सभी भाई बहनें लेकिन यह एक" चयनकर्ता। क्या यह अस्तित्व में है? जावास्क्रिप्ट के बिना इस को प्राप्त करने का कोई तरीका है?

Answer 1

चाल पेरेंट तत्व पर मंडराना छद्म चयनकर्ता जगह, और उसके बाद बच्चे शैली के हिसाब से है।

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

यहाँ एक डेमो है:: यहाँ है कि मैं क्या कर रहा हूँ की चर्चा करते हुए है http://jsfiddle.net/joshnh/FJAYk/

Answer 2

ऊपर के उदाहरण बहुत अच्छा है, लेकिन अगर वहाँ divs के बीच मार्जिन है और आप को गति प्रदान करने प्रभाव नहीं करना चाहते खाली जगह पर होवर करते समय, जावास्क्रिप्ट की कोई आवश्यकता नहीं है।

सिर्फ float:left.child को जोड़ सकते हैं और यह सुनिश्चित करें कि .parentoverflow:visible (यह डिफ़ॉल्ट रूप से दिखना चाहिए) है हो:

यहाँ एक सरल समाधान का है।

ऐसा करने से, .parent 0px उच्च (ताकि खाली जगह प्रभाव ट्रिगर नहीं करेगा), लेकिन .child पर मँडरा दोनों :hover pseudoclasses चलाता है हो जाता है।