我想学习jQueryjQuery的父母(嵌套的div)改变类
我想,当我将鼠标悬停一个孩子,他改变了(玫瑰在image) 类的家长(十一)。我相信一定是这样的 $(this).parent()。addClass(“XI”);
您可以复制并保存它的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>
如果我理解正确的话,那么'$(本).parent()addClass( “XI”)'是正确。你没有试过吗? – 2010-08-02 18:40:35
我试图从昨天;)但我无法看到我在做什么错误。无论如何,我想感谢你们为我找到的最快速答案(也为了精神)。)。我会再次阅读父母,父母和最亲密的。但我认为问题不在那里。这就是为什么我显示所有的代码。 – speciale 2010-08-02 19:01:56
你能更好地描述当你将鼠标悬停在哪个元素上时会发生什么?请举个具体的例子。 – 2010-08-02 19:41:35