Onmouseover d'un div qui contient d'autres elements

**achem94** · 01/10/2008, 10h24

Bonjour,

ce que je voudrais :

j'ai 2 div qui doivent s'afficher alternativement selon l'endroit de la souris :
lorsque la souris passe sur le div1, celui ci se cache et laisse apparaitre le div2, et lorsque la souris sort du div2, le div2 se cache et le div1 réapparait.

j'ai mis un onmouseover sur le div1 et un onmouseout sur le div2, ces 2 évènements cachent ou affichent l'un ou l'autre des div.

le problème c'est que mes div contiennent d'autres éléments et lorsque je survole ces éléments, le onmouseout se déclenche bien que géographiquement je soit bien toujours dans la zone du div2.

j'ai essayé de jouer avec les z-index mais soit je les place mal soit ça ne fonctionne pas.

merci de votre aide.

voici mon code simplifie :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
 
<script language="javascript">
function afficheContact(){
	obj = document.getElementById("boxContactFerme");
	obj.style.visibility = "hidden";
	obj = document.getElementById("boxContactOuvert");
	obj.style.visibility = "visible";
}
function cacheContact(){
	obj = document.getElementById("boxContactFerme");
	obj.style.visibility = "visible";
	obj = document.getElementById("boxContactOuvert");
	obj.style.visibility = "hidden";
}
</script>
 
<style>
#boxContactFerme, #boxContactOuvert{
	position: absolute;
	width: 150px;
	margin: 0;
	padding: 15px;
	background-color: #bbb;
}
.boxTxt1, .boxTxt{
	background-color:#CCCC99;
	float: left;
	margin: 5px;
}
.boxLigne1, .boxLigne{
	background-color: Aqua;
}
#boxContactOuvert{
	background-color: #ddd;
	visibility: hidden;
}
</style>
</head>
 
<body>
 
<div id="boxContactFerme" onmouseover="afficheContact();">
 
	<div class="boxLigne1">
		<div class="boxTxt1">Contactez-nous</div>
	</div>
 
</div>
 
<div id="boxContactOuvert" onmouseout="cacheContact();">
 
	<div class="boxLigne1">
		<div class="boxTxt1">Contactez-nous</div>
	</div>
 
	<div class="boxLigne">
		<div class="boxTxt">05 56 49 54 54</div>
		<div class="boxTxt">05 56 49 54 55</div>
		<div class="boxTxt">Ecrivez-nous</div>
	</div>
</div>
 
</body>
</html>