title: Use hover on div to change all elements inside that div
body: <p>My excuses in advance, since this seems to be a problem concerning very basic understanding of CSS and maybe also Javascript. </p>
  
  <p>What I want to do is this: imagine a div which contains a h3 and a p. On hovering on the div I would like the h3 and p to change their font-weight. So far I am using this code here to change the opacity and border on hovering over the div, but I really don't know how I can refer to the two elements inside the div. I'm really sorry, but I need someone to explain it to me in very simple terms. </p>
  
  <p>For example, I think those elements inside the div are called children, but I'm not even sure about that... I'm really working with all that HTML/CSS/Java stuff for the first time and try to figure things out as I go along. The tutorial sites I found so far couldn't solve my problem, therefore this post. </p>
  
  <p>More background information: I'm using the <a href="http://smoothgallery.jondesign.net/" rel="noreferrer">"smoothgallery" script</a> by jondesign (Jonathan Schemoul) () and am trying to bend it to my will, but that is pretty difficult if you don't have any clue how it actually works. The site I implemented the script in can be found <a href="http://org.scoutnet.de/dpsg/nrs/gallery/" rel="noreferrer">here</a>.</p>
  
  <p>Here comes the CSS part that changes the div on hover:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>This entry in the CSS file changes the settings for e.g. the h3 inside that div,</p>
  
  <pre><code>.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3{
      margin: 0;
      padding: 0;
      font-size: 12px;
      font-weight: normal;
  }  
  </code></pre>
  
  <p>You may also want to take a look at the .js file that makes these classes, it can be found <a href="http://org.scoutnet.de/dpsg/nrs/gallery/scripts/jd.gallery.set.js" rel="noreferrer">here</a>. </p>
  
  <p>This is probably the most important part here:</p>
  
  <pre><code>    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');
      },
  </code></pre>
  
  <p>So my question here is, if it is possible at all to change the h3 and p settings by using the hover function on the main div? </p>
  
  <p>Thanks in advance! Also for negative criticism, I don't really know if I did something wrong in the way I posted this question and if I can even ask it here. </p>