Afficher/cacher ne DIV

rrolet
Javascript

Je souhaiterais afficher une Div en fonction du survole d'une autre. (sflottante2 en fonction du survole de sflottante).
J'ai finis par trouver qu'en jQuery il existait la fonction .hover, mais je n'arrive pas à la mettre en oeuvre correctement

<u><strong>Le HTML</strong></u>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Albums voyages</title>
<link href="./css/style.css" rel="stylesheet" type="text/css" />
<link href="./css/menu.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="./js/jquery.js"> </script>
<script type="text/javascript" src="./js/test.js"> </script>

</head>
<body>
<div id="flo1" class="flottante">
<div class="sflottante"><img src="Equateur_jour01_009.JPG" /></div>
<div class="sflottante2"><img src="Equateur_jour01_009.JPG" /></div>
<h1> Légende folder N°1</h1>
<h2> 000 photo(s)</h2>
</div>
</div class="spacer"> </div>
</body>
</html>

<u><strong>Le script </strong></u>
$("div.flottante .sflottante").hover(
function () {
$(this).find(".sflottante2").show;
},
function () {
$(this).find(".sflottante2").hide;
}
);

<u><strong>Question subsiliaire</strong></u>
Le but est à terme est d'avoir plusieurs DIV de la class flottante. Comment faire pour que ca marche ???

<u><strong>Le CSS à titre d'info</strong></u>
.flottante {
background-color: #333;
float: left;
width: 380px;
height:120px;
text-align: left;
margin: 5px;
border-radius: 8px;
overflow: hidden;
}

.flottante h1 {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
color: #CDCDCD;
font-weight: bold;
}
.flottante h2 {
font-family: "Times New Roman", Times, serif;
font-size: 13px;
color: #E4E4E4;
font-weight: bold;
}

.sflottante {
background-color: #559;
float: left;
width: 150px;
height: 100px;
text-align: center;
margin: 10px;
border-radius: 8px;
overflow: hidden;
}

.sflottante img {

width: 100%;
height: 100%;
border-radius: 8px;
overflow: hidden;
}

.sflottante img:hover {
opacity:0.5;
cursor: pointer;
}

.spacer {
clear: both;
}

.sflottante2 {
background-color: #559;
float: left;
width: 150px;
height: 100px;
text-align: center;
margin: 10px;
border-radius: 8px;
overflow: hidden;
display: none;
}

Merci pour votre aide

1 réponse

wYm

Salut je pense qu'il ne faut changer le $(this) dans ton script car le $(".ta1Class")find(".ta2Class") va chercher dans la permiere class s'il trouve la deuxième class hors dans ton code sflottante2 n'est pas inclus dans sflottante. alors essaye :

$("div.flottante .sflottante").hover(function () {
$("div.flottante ").find(".sflottante2").show();
}, 
function () {
$("div.flottante").find(".sflottante2").hide();
}
);