Dédoublement mouseover

Version imprimable

Bonjour,

Je m'initie progressivement à Jquery et je rencontre là un petit problème que je n'arrive pas à résoudre. Il semblerait qu'un événement mouseover sur un <div> contenant une <img> soit exécuté deux fois d'affilée, en effet, je constate l'exécution du traitement :
- au passage de la souris sur le div (ok)
- et au passage de la souris sur l'image (pourquoi??)

Déjà, j'ai debuggé côté css,affiché mes bordures, vérifié que l'image était bien contenue dans le <div>, j'ai par ailleurs tenté quelques forcing css tels que display:inline, zoom:1 etc... sans trouvailles ni même côté javascript où chaque alerte renvoie le résultat escompté.

Détail du traitement :
J'ai plusieurs DIV ayant des textes descriptifs respectifs masqués que je souhaite afficher à chaque mouseover sur les DIV.

Voici mon script JS :
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 <script> $(document).ready(function(){ $(".hello").each(function(){ // init de l'ID du DIV contenant le texte descriptif var theId = this.id+"Aide"; $(this).mouseover(function(){ // Masque tous les div contenant les textes $(".world").css('display','none'); // Affiche le div (le texte) correspondant au div survolé $("#"+theId).slideDown('fast'); }); }); }); </script>  <div class="hello" id="coucou1"> <div class="hello_img"><img src="image1.png" alt="" title="" /></div> </div> <div class="hello" id="coucou2"> <div class="hello_img"><img src="image2.png" alt="" title="" /></div> </div>  <div class="world" id="coucou1Aide">Texte descriptif 1</div> <div class="world" id="coucou2Aide">Texte descriptif 2</div>
Un coup de main ?

07/06/2009, 17h49
speedev

J'avance...ça ne provient pas des images mais des div les contenant.
07/06/2009, 23h38
le_chomeur

car tu as un mouseover , puis un out quand tu survoles ceux de l'intérieur , mais aussitôt un over :)

Bonsoir.

Un exemple de ce qu'il est possible de réaliser en jQuery :

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
<!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" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid red;
            font-size:0.8em;
        }
        div#affiche {
            margin:12px;
            border:1px solid #999999;
        }
        div.hello {
            width:300px;
            height:300px;
            float:left;
            margin-bottom:24px;
            border:thin solid #CCCCCC;
            text-align:center;
        }
        div.world {
            display:none;
            margin-top:12px;
        }
    </style>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".hello_img").each(function(i, item){
                var aideID = item.id+"Aide";
 
                //console.log("item[" + i + "] = " + item + ", item.id = " + item.id + ", aideID = " + aideID);
 
                $(item).hover(
                    function () {
                        $("#"+aideID).fadeIn("slow");
                    }, 
                    function () {
                        $("#"+aideID).fadeOut("slow");
                    }
                );                
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <div class="hello">
            <img id="coucou1" class="hello_img" src="../images/danielhagnoul.jpg" alt="" width="120" height="117" title="" />
            <div class="world" id="coucou1Aide">
                <p>Texte descriptif 1</p>
            </div>
        </div>
        <div class="hello" style="margin-left:24px;">
            <img id="coucou2" class="hello_img" src="../images/imageTest.png" alt="" width="270" height="200" title="" />
            <div class="world" id="coucou2Aide">
                <p>Texte descriptif 2</p>
            </div>
        </div>
        <div id="affiche" style="clear:both; margin-top:24px;">
            <p>Un exemple de ce que l'on peut faire avec hover()</p>
        </div>
    </div>
</body>
</html>

08/06/2009, 08h45
speedev

J'avais un mouseout au tout début de mon dev, mais je l'ai enlevé (avant de poster ici). Là je n'ai plus de mouseout, tout s'effectue sur mouseover. Un out s'effectue malgré tout le_chomeur ?? (faut que je regarde plus en détail la doc jquery)

Merci danielhagnoul. Le Hover est intéressant, je ne connaissais pas cette possibilité, je le teste sur mon dev dès ce soir.
12/06/2009, 14h07
marcha
Citation:

Envoyé par speedev

Il semblerait qu'un événement mouseover sur un <div> contenant une <img> soit exécuté deux fois d'affilée, en effet, je constate l'exécution du traitement :
- au passage de la souris sur le div (ok)
- et au passage de la souris sur l'image (pourquoi??)

Salut,

La problématique que tu rencontre n'est pas liée à JQuery mais au mode
de gestion des évènements dans les navigateurs. Tu as associé un gestionnaire
d'évènement à ta div pour le mouseover, celui-ci sera appelé pour tous les mouseover
sur ce div ainsi que tous les mouseover sur tous ses éléments enfants (dans
ton cas uniquement une image)

Lis déjà ceci, principalement "La remontée des événements"

Pour palier à ce problème, l'idéal serait d'utiliser la capture au niveau du div,
malheureusement la capture n'est pas supportée sur IE6 (IE7-8 je sais pas)

Une autre possibilité c'est de gérer l'évènement au niveau des enfants et
d'empêcher sa propagation, exemple:
Code:

1 2 3 4 $('div *').mouseover( function(event) { event.stopPropagation(); });
Mais cette technique risque de ne pas fonctionner dans tous les cas (par
exemple quand l'image est 'collée' sur un bord du div et que la souris passe
directement d'une zone hors du div à l'image, le mouseover du div pourrait
ne pas être levé)

Une autre approche est de tester le target de l'évènement au lieu d'empêcher
la propagation depuis les enfants. Et d'agir en conscéquence
Code:

1 2 3 4 5 6 $('div').mouseover( function(event) { if(event.target.nodeName!='img') { ... } });
Autre approche, n'afficher le this.id+"Aide" que si celui-ci ne l'est pas
déjà et temps pis pour les multiples mouseover

Enfin, encore un piste, n'utiliser que CSS pour résoudre ce problème:

Avec quelque chose du genre:
Code:

1 2 .hello .aide { display: none; } .hello:hover .aide { display: block; }
Mais il faut placer tes div.aide dans les div.hello dans ton code html

C'est la solution qui me semble la plus simple pour bien des cas, mais pas
compatible IE6 (ne gère :hover que sur les liens 'a')

Quoi qu'il en soit, tu vas être confronté au même problème avec le mouseout,
une solution intéressante pour cacher les div d'aide c'est d'utiliser le mouseover
du body au lieu de gérer les mouseout. Mais il faut un stopPropagation lorsque
tu gère le mouseover du div (sinon ton aide va pas être visible longtemps :-)
12/06/2009, 16h08
speedev

Bonne réponse, merci beaucoup.
J'ignorais qu'un mouseOver se propageait sur les enfants du parent. Tout s'explique.
Toutes tes solutions sont prenables. Je vais faire mon choix mais en l'occurrence, comme mes images ne touchent pas les bords du div (j'ai toujours un petit conteneur-spacer avec un padding:2px généralement) j'ai pensé retenir la solution 2 dans tes propositions cela dit, je me méfie des mouvements brusques de souris qui savent souvent perturber le moteur javascript.

Au final je vais surement assurer le tout en killant les Events sur les enfants lorsqu'un event est lancé.

Merci encore.