I'm trying to learn jQuery
I want that, when I hover a children, he changes (rose in the image) the class of parents (XI). I believe that must be something like that $(this).parent().addClass("XI");
You can copy and save it near jQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PAPOU VERTICAL</title>
<link rel="stylesheet" type="text/css" media="all" href="papouVER.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div[class$='OO']").hover(function(){
$(this).toggleClass("OI");
$(this).children().toggleClass("OI");
$(this).children().hover(function(){
$(this).toggleClass("OI");
});});});
</script>
<style>
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;}
</style>
</head>
<body>
<div class="papa">
<div class="papa-OO">
<a href="#">L'autre papounet et ses lardons</a>
<div class="maison-OO">
<div class="filscache-OO">
<a href="#">Un autre fils gardé par sa nurse…</a>
</div>
<div class="filscache-OO">
<a href="#">Un fils gardé par sa nurse</a>
<div class="nurse-OO">
<div class="filscache-OO">
<a href="#">Un autre fils gardé par sa nurse…</a>
</div>
<div class="filscache-OO">
<a href="#">Un fils avec un seul copain</a>
<div class="nurse-OO">
<div class="filscache-OO">
<a href="#">Un autre fils gardé par sa nurse…</a>
</div>
</div>
</div>
<div class="filscache-OO">
<a href="#">Un autre fils gardé par sa nurse…</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pages">
Pages<br />Pages<br />Pages<br />Pages<br />Pages<br />Pages<br />Pages<br />Pages<br />Pages<br />Pages<br />Pages<br />Pages<br />Pages<br />
</div>
</body>
</html>