Mouseover et petit decalage.

Bonjour par ici.

J'ai un petit soucis avec ce code : http://jsfiddle.net/sv6Lu/

Lorsque je déplace ma souris sur les boutons de la seconde frame, il y a un soucis au niveau de la bordure de ces derniers et c'est comme si ça donnait un mouseout.

Ca donne donc un effet de "clignotement" assez peu propre au survol.

Une idée ?

Un rappel du code ci-dessous :

Code:

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
<div style="width: 100%; height:160px;"> 
<style type="text/css">
 
 #madiv{
position: absolute;
       margin-left: auto;
       margin-right: auto;
 width:260px;
 height:160px;
 visibility:hidden;
 }
 
 #madiv2{
position: absolute;
       margin-left: auto;
       margin-right: auto;
 width:260px;
 height:160px;
 visibility:visible;
 }
 
.boutonardoise a {
display:block;
width:109px;
line-height:35px;
text-align:center;
vertical-align:middle;
background:url(http://www.monsterup.com/upload/134094099551.png) no-repeat;
color:white;
text-decoration:none;
float:right;
margin:2px;
}
.bouton a:hover {
background:url(http://www.monsterup.com/upload/134094099551.png) no-repeat;
}
 
 </style>
 
<div id="madiv" align="center" onmouseout="document.getElementById('madiv2').style.visibility='visible'; document.getElementById('madiv').style.visibility='hidden'" >[...] Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, Texte, [...]
 
<div class="boutonardoise">
  <p>
   <a href="#">Commander</a>
 </p>
</div>
<div class="boutonardoise">
  <p>
   <a href="#">Comparer</a>
 </p>
</div>
 
</div>
 
<div id="madiv2">
 
<img onmouseover="document.getElementById('madiv').style.visibility='visible'; document.getElementById('madiv2').style.visibility='hidden'" src="http://siteprojet.com/Projets/RasoirClub/sites/all/themes/bluemasters/images/blade-2.png">
 
</div>
</div>