title: jQuery parents (nested divs) change class
body: <p>I'm trying to learn jQuery</p>
  
  <p>I want that, when I hover a children, he changes (rose in the <a href="http://www.luis-speciale.net/test.png" rel="nofollow noreferrer">image</a>)
  the class of parents (XI). I believe that must be something like that
  $(this).parent().addClass("XI");</p>
  
  <p>You can copy and save it near jQuery</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;PAPOU VERTICAL&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" media="all" href="papouVER.css" /&gt;
      &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
      $("div[class$='OO']").hover(function(){
          $(this).toggleClass("OI");
          $(this).children().toggleClass("OI");
          $(this).children().hover(function(){
          $(this).toggleClass("OI");
          });});});   
      &lt;/script&gt;   
      &lt;style&gt;
  body{margin:0;padding:0;background:#FFF url(images/stripe.png);}
  .pages { position:absolute;float:left;float:left;z-index:-1000;}
  .pagesbis{ float:left;float:left;z-index:-1000;}
  .papa {position:absolute;width:100%;border-bottom:1px solid #aaa;color:#777;background-color:#FEFEFE;-moz-box-shadow: 0 5px 5px -2px #CDCDCD; -webkit-box-shadow: 0 3px 5px #AAA;}
  .papa-OO{ position:relative;float:left;float:left;width:auto;}
  .maison-OO{ position:absolute;display:none;z-index:-50;}
  .maison-OO.OI{ display:block;-moz-box-shadow: 0 3px 5px #AAA; 
  -webkit-box-shadow: 0 3px 5px #AAA;}
  .nurse-OO{ z-index:90;width:auto;position:absolute;left:100%;top:0;display:none;}
  .nurse-OO.OI{ display:block;-moz-box-shadow: 0 3px 5px #AAA; -webkit-box-shadow: 0 3px 5px #AAA;}
  .filscache-OO{ position:relative;}
  .papa-OO a { display:block;padding:0.7em;color:#777;background-color:#FEFEFE;font-size:0.7em;font-weight:bold;text-decoration:none;white-space:nowrap;}
  .papa-OO a:hover { display:block;color:#222;background:#CCC;}
  .OI.XI { display:block;color:#222;background:#DDD;}
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="papa"&gt;
  &lt;div class="papa-OO"&gt;
  &lt;a href="#"&gt;L'autre papounet et ses lardons&lt;/a&gt;
  &lt;div class="maison-OO"&gt;
                      &lt;div class="filscache-OO"&gt;
                          &lt;a href="#"&gt;Un autre fils gardé par sa nurse…&lt;/a&gt;
                      &lt;/div&gt;
  
      &lt;div class="filscache-OO"&gt;
          &lt;a href="#"&gt;Un fils gardé par sa nurse&lt;/a&gt;
          &lt;div class="nurse-OO"&gt;
  
              &lt;div class="filscache-OO"&gt;
                  &lt;a href="#"&gt;Un autre fils gardé par sa nurse…&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="filscache-OO"&gt;
                  &lt;a href="#"&gt;Un fils avec un seul copain&lt;/a&gt;
                  &lt;div class="nurse-OO"&gt;
                      &lt;div class="filscache-OO"&gt;
                          &lt;a href="#"&gt;Un autre fils gardé par sa nurse…&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
                  &lt;div class="filscache-OO"&gt;
                      &lt;a href="#"&gt;Un autre fils gardé par sa nurse…&lt;/a&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="pages"&gt;
  Pages&lt;br /&gt;Pages&lt;br /&gt;Pages&lt;br /&gt;Pages&lt;br /&gt;Pages&lt;br /&gt;Pages&lt;br /&gt;Pages&lt;br /&gt;Pages&lt;br /&gt;Pages&lt;br /&gt;Pages&lt;br /&gt;Pages&lt;br /&gt;Pages&lt;br /&gt;Pages&lt;br /&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>