2011-07-12 7 views
5

मैं निम्न HTML है:सीएसएस परिवर्तन दो लिंक जब उनमें से किसी एक पर मँडरा

<div id="main"> 
    <div id="home" class="section"> 
     <ul> 
      <li class="home_li"><a href="#home" class="goto_home">Home</a></li> 
      <li class="about_li"><a href="#about" class="goto_about">About us</a></li> 
      <li class="contact_li"><a href="#contact" class="goto_contact">Contact</a></li> 
     </ul> 
    </div> <!-- End home --> 

    <div id="nav"> 
     <ul> 
      <li class="home_li"><a href="#home" class="goto_home"></a></li> 
      <li class="about_li"><a href="#about" class="goto_about"></a></li> 
      <li class="contact_li"><a href="#contact" class="goto_contact">Contact</a></li> 
     </ul> 
    </div> <!-- End nav --> 
</div> <!-- End main --> 

मुझे क्या करना कोशिश कर रहा हूँ दोनों लिंक की स्थिति बदलने के लिए जब एक hovered जा रहा है। उदाहरण के लिए, यदि मैं <div id="home"> के तहत 'लगभग' पर होवर करता हूं, तो मैं दोनों लिंक चाहता हूं, वह एक और एक <div id="nav"> के तहत, अस्पष्टता के साथ प्रदर्शित किया जाना चाहिए।

यदि संभव हो तो मैं जेएस से दूर रहने की कोशिश कर रहा हूं। अब तक सीएसएस के साथ मेरा प्रयास आसन्न चयनकर्ताओं के साथ रहा है लेकिन यह मेरे लिए नया है इसलिए मैं इसे काम करने में सक्षम नहीं हूं।

#home .about_li a:hover + #nav .about_li a { 
     opacity: .5; 
    } 

क्या यह केवल सीएसएस के साथ किया जा सकता है?

संपादित करें:

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

किसी अन्य संपादन का:

ठीक है, मैं इन चयनकर्ताओं बारे में कुछ और पढ़ा है और अब मैं समझ गया। मैंने सोचा था कि मुख्य div के अंदर सभी होने के नाते वे भाई बहन थे: पी और अब मैं देखता हूं कि यह क्यों काम नहीं करता है। मैं देखूंगा कि मैं केवल सीएसएस का उपयोग करने के लिए एक कामकाज के साथ आ सकता हूं और यहां वापस पोस्ट करूंगा। अन्यथा मैं, के साथ जे एस :(

+0

जो आपने किया है वह काम नहीं करता है क्योंकि आपका सीएसएस नियम # एनएवी के तहत एक टैग की तलाश में है जो # होम के नीचे एक टैग के आसन्न भाई है। मुझे लगता है कि आपको ऐसा करने के लिए जेएस की आवश्यकता है। –

+0

सीएसएस वास्तव में ऐसा नहीं कर सकता है। यहां तक ​​कि अगर एचटीएमएल को भारी रूप से बदलना एक विकल्प था, तो आप दूसरे लिंक पर होने पर पहला लिंक बदल नहीं पाएंगे। JQuery को समर्पण! – thirtydot

+0

@brunn: http://jsfiddle.net/hweEr/4/ – Jawad

उत्तर

2

दुर्भाग्य से, आपके संरचना अकेले CSS चयनकर्ताओं के लिए बहुत जटिल है जाऊँगा के रूप में a तत्व एक दूसरे के भाई-बहन नहीं हैं, लेकिन यह इतने पर अपने भीतर div रों है, और।

यह jQuery की तरह जावास्क्रिप्ट पुस्तकालयों के साथ बहुत आसान है, अन्यथा आप भाग्य से बाहर रहे हैं।

1

नहीं, यदि आप HTML संरचना को बदलने के लिए नहीं जा रहे हैं, या आप jQuery

1

उपयोग कर सकते हैं यह सीएसएस के साथ नहीं किया जा सकता ; हालांकि मैं जेएस, विशेष रूप से हेवीवेघ का एक गुच्छा लोड करने से दूर रहने के अपने प्रयासों की सराहना करता हूं टी पुस्तकालयों।

संबंधित मुद्दे