Appliquer au parent le style de l'enfant qd l'enfant est survolé

Question

Gastou

7 Oct 2011 à 19:14

Bonjour,
Après plusieurs jours de recherche je m'en remets à vous !

je voudrais exécuter des commandes où appliquer au parent (le menu) le style de l'enfant (sous menu)quand l'enfant est survolé.
J'utilise l'appel à jquery.js

Ma page html :

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=windows-1250">

<meta name="generator" content="PSPad editor, www.pspad.com">

<title>TutorialNET by wonkaStudio - tutorial 499</title>

<link rel="stylesheet" href="css/tutorial_499_css.css" type="text/css" media="screen" />

</head>

<body>

<div id="bloc_website">

<ul class="topnav"> 

<li><a href="#">Page de garde</a></li>

<li><a href="#">Menu 1</a>

<ul class="subnav">

<li><a href="#">toto1</a></li>

<li><a href="#">toto2 toto2</a></li>

<li><a href="#">toto3 toto3</a></li>

<li><a href="#">toto1 toto3</a></li>

<li><a href="#">toto3 toto2</a></li>

</ul>

</li>

<li><a href="#">Menu 2</a>

<ul class="subnav">

<li><a href="#">titi1 titi2</a></li>

<li><a href="#">titi3 titi2</a></li>

<li><a href="#">titi3 titi2</a></li>

<li><a href="#">titi3</a></li>

<li><a href="#">titi2 titi3</a></li>

</ul>

</li>

<li><a href="#">Menu 3</a></li>

<li><a href="#">Menu 4</a></li>

</ul>

<div id="explication">

<h1>Menu horizontal avec javascript ou sous menu qui slide</h1>

</div>

</div>



<script type="text/javascript" src="javascript/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="javascript/script.js"></script>

</body>
</html>

Mon fichier javascript

$(document).ready(function(){

$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

//$("ul.topnav li span").click(function() { //When trigger is clicked.
//$("ul.topnav li span").hover(function() { //When trigger is clicked...

$("ul.topnav li a").hover(function() {

//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up

});

//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});

});

Mon CSS
/* CSS Document */

body {
font-family:verdana;
}

#bloc_website {
float: left;
width:600px;
}

#explication {
float:left:
width:600px;
padding:20px;
margin:50px 0 0 0;
}
h1 {
font-size:18px;
}
h2 {
font-size:12px;
}
p {
font-size:10px;
line-height:20px;
padding:10px;
}
p a {
font-weight:bold;
color:#000000;
}

ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 600px;
height:40px;
font-size: 10px;
/*background: url(../images/bg_menu.png) no-repeat;*/
}
ul.topnav li {
float: left;
margin: 0;
padding:0;
position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
padding: 0;
height:40px;
line-height:40px;
text-align:center;
width:100px;
margin:0 12px 0 0;
font-weight:bold;
color: #000000;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
/*background: url(../images/bg_menu_hover.png) no-repeat center top;*/
/* background-color: rgba(215, 215, 215, 0.5); /* un arrière plan bleu à 50% de transparence */
background-color: #D7D7D7;
background-opacity:0.5;
color: #AA0000;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 13px;
height: 16px;
margin:12px 0 0 -15px;
float: left;
/*background: url(../images/arrow1.png) no-repeat center top;*/
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 40px;
/*background: #6f0019;*/
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;

/*border: 1px solid #6f0019;*/

}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 140px;
/*background-color: rgba(215, 215, 215, 0.95); un arrière plan bleu à 50% de transparence */
/*background: #012 url(../images/arrow2.png) no-repeat 10px center;*/
background: #D7D7D7 url(../images/arrow2.png) no-repeat 10px center;
padding-left: 30px;
text-align:left;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #D7D7D7 url(images/arrow2.png) no-repeat 15px center;
/* background: #D7D7D7;*/

}
Modifié par Gastou (08 Oct 2011 - 13:10)

Skoua

8 Oct 2011 à 19:04

Hello,

Commence par mettre ton code entre des balises [ code][ /code] (sans les espaces) parce que c'est illisible là. Smiley langue

Gastou

8 Oct 2011 à 19:08

Bien sûr, pas de problème :

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=windows-1250">

<meta name="generator" content="PSPad editor,  www.pspad.com">
 

<title>TutorialNET by wonkaStudio - tutorial 499</title>

<link rel="stylesheet" href="css/tutorial_499_css.css" type="text/css" media="screen" />

</head>

<body>





<div id="bloc_website">





<ul class="topnav"> <!-- menu -->

<li><a href="#">Page de garde</a></li>

<li><a href="#">Menu 1</a>





<ul class="subnav">

<li><a href="#">toto1</a></li>

<li><a href="#">toto2 toto2</a></li>

<li><a href="#">toto3 toto3</a></li>

<li><a href="#">toto1 toto3</a></li>

<li><a href="#">toto3 toto2</a></li>

</ul><!-- fin du sous-menu 1 -->



</li>

<li><a href="#">Menu 2</a>





<ul class="subnav">

<li><a href="#">titi1 titi2</a></li>

<li><a href="#">titi3 titi2</a></li>

<li><a href="#">titi3 titi2</a></li>

<li><a href="#">titi3</a></li>

<li><a href="#">titi2 titi3</a></li>

</ul><!-- fin du sous-menu 2 -->



</li>

<li><a href="#">Menu 3</a></li>

<li><a href="#">Menu 4</a></li>



</ul><!-- fin du menu -->


<div id="explication">

<h1>Menu horizontal avec javascript ou sous menu qui slide</h1>

</div>

</div><!-- fin de bloc-website -->

<!-- scripts en fin de page pour optimiser le chargement -->

<script type="text/javascript" src="javascript/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="javascript/script.js"></script>

</body>
</html>

$(document).ready(function(){

$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

//$("ul.topnav li span").click(function() { //When trigger is clicked.
//$("ul.topnav li span").hover(function() { //When trigger is clicked...

$("ul.topnav li a").hover(function() {


//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up

});

//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});

});

/* CSS Document */

body {
font-family:verdana;
}

#bloc_website {
float: left;
width:600px;
}

#explication {
float:left:
width:600px;
padding:20px;
margin:50px 0 0 0;
}
h1 {
font-size:18px;
}
h2 {
font-size:12px;
}
p {
font-size:10px;
line-height:20px;
padding:10px;
}
p a {
font-weight:bold;
color:#000000;
}

ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 600px;
height:40px;
font-size: 10px;
/*background: url(../images/bg_menu.png) no-repeat;*/
}
ul.topnav li {
float: left;
margin: 0;
padding:0;
position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
padding: 0;
height:40px;
line-height:40px;
text-align:center;
width:100px;
margin:0 12px 0 0;
font-weight:bold;
color: #000000;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
/*background: url(../images/bg_menu_hover.png) no-repeat center top;*/
/* background-color: rgba(215, 215, 215, 0.5); /* un arrière plan bleu à 50% de transparence */
background-color: #D7D7D7;
background-opacity:0.5;
color: #AA0000;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 13px;
height: 16px;
margin:12px 0 0 -15px;
float: left;
/*background: url(../images/arrow1.png) no-repeat center top;*/
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 40px;
/*background: #6f0019;*/
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;


/*border: 1px solid #6f0019;*/

}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 140px;
/*background-color: rgba(215, 215, 215, 0.95); un arrière plan bleu à 50% de transparence */
/*background: #012 url(../images/arrow2.png) no-repeat 10px center;*/
background: #D7D7D7 url(../images/arrow2.png) no-repeat 10px center;
padding-left: 30px;
text-align:left;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #D7D7D7 url(images/arrow2.png) no-repeat 15px center;
/* background: #D7D7D7;*/

}

Sujet clos