मंडराना उपयोग सभी तत्वों, अग्रिम में

Question

मेरे बहाने कि div के अंदर बदलने के लिए के बाद से यह एक समस्या सीएसएस के बहुत बुनियादी समझ और शायद यह भी जावास्क्रिप्ट के विषय में किया जा रहा है। एक div जो एक h3 और एक पृ कल्पना:

मुझे क्या करना चाहते हैं यह है। Div पर होवर करने पर मैं एच 3 और पी को अपने फ़ॉन्ट-वेट को बदलना चाहता हूं। अब तक मैं इस कोड यहाँ का उपयोग कर रहा div पर मँडरा पर अस्पष्टता और सीमा को बदलने के लिए है, लेकिन मैं वास्तव में नहीं पता है कि मैं div के अंदर दो तत्वों का उल्लेख कर सकते हैं। मैं वास्तव में माफी चाहता हूं, लेकिन मुझे किसी को बहुत सरल शब्दों में मुझे समझाने की आवश्यकता है।

उदाहरण के लिए, मैं div के अंदर उन तत्वों बच्चों को कहा जाता है लगता है, लेकिन मैं इस बारे में भी यकीन नहीं है ... मैं वास्तव में पहली बार के लिए वह सब HTML/CSS/जावा सामान के साथ काम कर रहा हूँ और कोशिश जैसा कि मैं साथ जाता हूं चीजों को समझने के लिए। अब तक मिली ट्यूटोरियल साइटें मेरी समस्या को हल नहीं कर सकती हैं, इसलिए यह पोस्ट।

अधिक पृष्ठभूमि जानकारी: मैं jondesign (जोनाथन स्केमौल)() द्वारा "smoothgallery" script का उपयोग कर रहा हूं और इसे अपनी इच्छानुसार मोड़ने की कोशिश कर रहा हूं, लेकिन यह बहुत मुश्किल है यदि आपके पास कोई संकेत नहीं है कि यह वास्तव में कैसे काम करता है। जिस साइट पर मैंने स्क्रिप्ट लागू की है उसे here मिल सकता है।

.jdGallery .gallerySelector .gallerySelectorInner div.hover{ 
    border: 1px solid #89203B; 
    border-left: 0.8em solid #89203B; 
    background: url('../../images/teaserBox_bg.jpg') no-repeat; 
    background-size: 100% 100%; 
    filter:alpha(opacity=1); 
    -moz-opacity:1; /
    -khtml-opacity: 1; 
    opacity: 1; 
} 

सीएसएस फ़ाइल में इस प्रविष्टि उदा के लिए सेटिंग बदलता है:

यहाँ सीएसएस बात यह है कि हॉवर पर div में परिवर्तन आता है कि div अंदर h3,

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3{ 
    margin: 0; 
    padding: 0; 
    font-size: 12px; 
    font-weight: normal; 
} 

आप भी इन वर्गों करता है कि .js फ़ाइल पर एक नज़र लेने के लिए चाहते हो सकता है, यह here पाया जा सकता है।

यह शायद यहाँ सबसे महत्वपूर्ण हिस्सा है:

createGalleryButtons: function() { 
      var galleryButtonWidth = 
        ((this.galleryElement.offsetWidth - 30)/2) - 14; 
      this.gallerySet.each(function(galleryItem, index){ 
        var button = new Element('div').addClass('galleryButton').injectInside(
          this.gallerySelectorInner 
        ).addEvents({ 
          'mouseover': function(myself){ 
            myself.button.addClass('hover'); 
          }.pass(galleryItem, this), 
          'mouseout': function(myself){ 
            myself.button.removeClass('hover'); 
          }.pass(galleryItem, this), 
          'click': function(myself, number){ 
            this.changeGallery.pass(number,this)(); 
          }.pass([galleryItem, index], this) 
        }).setStyle('width', galleryButtonWidth); 
        galleryItem.button = button; 
        var thumbnail = ""; 
        if (this.options.showCarousel) 
          thumbnail = galleryItem.elements[0].thumbnail; 
        else 
          thumbnail = galleryItem.elements[0].image; 
        new Element('div').addClass('preview').setStyle(
          'backgroundImage', 
          "url('" + thumbnail + "')" 
        ).injectInside(button); 
        new Element('h3').set('html', galleryItem.title).injectInside(button); 
        new Element('p').addClass('info').set('html', formatString(this.options.textGalleryInfo, galleryItem.elements.length)).injectInside(button); 
      }, this); 
      new Element('br').injectInside(this.gallerySelectorInner).setStyle('clear','both'); 
    }, 

तो मेरे सवाल यहाँ है, अगर यह सब संभव है मुख्य div पर मंडराना फ़ंक्शन का उपयोग करके h3 और पी सेटिंग्स बदलने के लिए है?

अग्रिम धन्यवाद! नकारात्मक आलोचना के लिए, मुझे वास्तव में पता नहीं है कि मैंने इस प्रश्न को पोस्ट करने के तरीके में कुछ गलत किया है और यदि मैं इसे यहां भी पूछ सकता हूं।

Answer 1

आप इस तरह से और अधिक जटिल की तुलना में यह करने की जरूरत है कर रहे हैं। ऐसा करने के लिए कोई जावास्क्रिप्ट आवश्यक नहीं है। मान लीजिए कि आप मिल गया है निम्नलिखित हैं:

<div class="container"> 
    <h3>This is a header</h3> 
    <p>This is a paragraph</p> 
</div> 

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

.container { border:1px solid black; padding:10px; } 
.container h3 { font-weight:normal; } 
.container p { color:red; } 

जब आप पर माउस को हॉवर, आप नीले करने के लिए बदलने के लिए पैरा और बोल्ड में शीर्षक और बॉक्स के बॉर्डर चाहते: यहाँ अपनी शैली है।

.container:hover { border-color:blue; } 
.container:hover h3 { font-weight:bold; } 
.container:hover p { font-weight:bold; } 

ध्यान दें कि आप अंतरिक्ष का एक सा बचा सकता है, और के साथ एक लाइन में <h3> और <p> शैलियों के संयोजन से यह अधिक संक्षिप्त बनाने: उपरोक्त CSS नीचे अपना स्टाइलशीट (या <style> ब्लॉक) में इस जोड़े एक अल्पविराम, क्योंकि वे दोनों एक ही हैं।पूरी बात अब इस प्रकार दिखाई देगा:

.container { border:1px solid black; padding:10px; } 
.container h3 { font-weight:normal; } 
.container p { color:red; } 
.container:hover { border-color:blue; } 
.container:hover h3, .container:hover p { font-weight:bold; } 

याद रखें कि 'सी' "सीएसएस" में "व्यापक" के लिए खड़ा है: शैलियों दोनों पदानुक्रम के माध्यम से नीचे झरना (जो है, एक माता पिता के तत्व की शैली भी एक पर लागू होता है बाल तत्व, जब तक कि इसे मार्जिन या जो कुछ भी डिफ़ॉल्ट शैलियों नहीं मिलते), और स्टाइल शीट के नीचे - इसका अर्थ यह है कि यदि आप उसी तत्व पर लागू होते हैं तो दूसरों के बाद परिभाषित शैलियों को ओवरराइड कर दिया जाएगा।

सीएसएस में "होवर" चयनकर्ता बहुत कम अपवादों के साथ कुछ भी इस्तेमाल किया जा सकता है। मैं नियमित रूप से जावास्क्रिप्ट-मुक्त ड्रॉप-डाउन मेनू के लिए उनका उपयोग करता हूं। आप यहां "होवर" सीएसएस चयनकर्ता पर अधिक पा सकते हैं: W3Schools CSS reference on ":hover"। वास्तव में, W3Schools site आपके सीएसएस को ब्रश करने के लिए आम तौर पर एक महान संसाधन है।