title: Highlight whole row on hover
body: <p>I have a javaScript function that loops through a variable number of iterations and spits HTML to the DOM / Webpage. Thus after the loop it fills the following div:</p>
  
  <pre><code>  &lt;div class="energyRowContainer" id="energyRowContainer"&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>like so...</p>
  
  <pre><code>&lt;div class="energyRowContainer" id="energyRowContainer"&gt;
  
  &lt;div id="energyRow0" class="energyRow"&gt;
  &lt;div class="energyTypeHead"&gt; 1.2.2012 &lt;/div&gt;&lt;div class="energyUnitMWH"&gt; 93 &lt;/div&gt;&lt;div class="energyUnitT"&gt; 174 &lt;/div&gt;&lt;div class="energyUnitM3_1"&gt; 6594 &lt;/div&gt;&lt;div class="energyUnitM3_2"&gt; 116 &lt;/div&gt;&lt;div class="energyUnitM3_3"&gt; 34162 &lt;/div&gt;&lt;div class="energyUnitM3_4"&gt; 2625 &lt;/div&gt;&lt;div class="energyUnitM3_5"&gt; 17886 &lt;/div&gt; &lt;div class="energyUnitM3_6"&gt; 21 &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="energyRow1" class="energyRow"&gt;
  &lt;div class="energyTypeHead"&gt; 1.2.2012 &lt;/div&gt;&lt;div class="energyUnitMWH"&gt; 93 &lt;/div&gt;&lt;div class="energyUnitT"&gt; 174 &lt;/div&gt;&lt;div class="energyUnitM3_1"&gt; 6594 &lt;/div&gt;&lt;div class="energyUnitM3_2"&gt; 116 &lt;/div&gt;&lt;div class="energyUnitM3_3"&gt; 34162 &lt;/div&gt;&lt;div class="energyUnitM3_4"&gt; 2625 &lt;/div&gt;&lt;div class="energyUnitM3_5"&gt; 17886 &lt;/div&gt; &lt;div class="energyUnitM3_6"&gt; 21 &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
  </code></pre>
  
  <p>now I'd like to use Jquery or CSS to change the background color of the whole row (class="energyRow") however simply creating a energyRow:hover doesn't work as I'm hovering over the child divs... I've thought about using like this but I"m getting nowhere... any ideas anyone?</p>
  
  <pre><code>$('#energyRowContainer &gt; .energyRow, ').hover(function() {
      $(this).parent().toggleClass('name_of_a_hover_class');
  });
  </code></pre>