title: jQuery - change border colors of nested divs of same class on mouseover
body: <p>My html contains a series of nested divs, each having the same class ("shell") but a unique id.</p>
  
  <pre><code>&lt;div class="shell s01" id="blah"&gt;
      &lt;!-- s01 content --&gt;
      &lt;div class="shell s02" id="bar"&gt;
          &lt;!-- s02 content --&gt;
          &lt;div class="shell s03" id="wah"&gt;
              &lt;!-- s03 content --&gt;
          &lt;/div&gt;
  
          &lt;div class="shell s03" id="foo"&gt;
              &lt;!-- s03 content --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want the border color of a div to change when the mouse enters it, but it should return to its original color when the mouse enters a child div.  The jQuery code below changes the border color to blue, but does not return parent div borders to the original color (#8E8DA2) as the mouse enters a child div.  Instead, when mousing over an inner div, it and all its ancestors are highlighted.  For example, if hovering over "wah" then "blah" and "bar" are highlighted too.  I want "blah" and "bar" to revert to the original border color.</p>
  
  <p>I understand that when the mouse is over a child it is over the child's parent as well.  But I'm not sure why the 'parent' statement below does not solve the problem.</p>
  
  <pre><code>$('.shell').mouseover(function() {
      $(this).parent('.shell').css('border-color', '#8E8DA2');
      $(this).css('border-color', '#0000FF');
  });
  
  $('.shell').mouseout(function() {
      $(this).css('border-color', '#8E8DA2');
  });
  </code></pre>
  
  <p>Any ideas?  Thanks!</p>