Comment détecter l'apparition d'un nouveau texte dans mon menu ?

Bonjour,
J'ai le code ci-dessous qui me permet de réaliser un menu de type "Slide"... Ca, ça fonctionne ! Après, ce que j'aurais besoin, c'est que quand on clique sur la colonne de droite, si un des textes apparaissant dans la nouvelle colonne de droite se trouve à ce moment là sous le curseur, il soit recopié dans le div "Detection_survol" -> Pensez-vous que cela soit possible, via javascript :question:

Par avance Merci pour toute suggestion éventuelle ! :)

(Ps: Je précise aussi le code CSS, au cas où quelqu'un en aurait besoin pour faire l'essai de mon code, de son coté)

Code html:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   
 
<title>Test</title>
 
<link type="text/css" rel="stylesheet" href="CSS.css"></link>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<!-- Fonctions javascript "Slide / menu tryptique" -->
<script type="text/javascript" src="Menu_tryptique.js"></script>
 
</head>
<body>
 
<div id="Container_ext">
    <div id="slidebox">
        <div id="Menu_precedant">1</div>
        <div id="Menu_avant">2</div>
        <div id="Menu_present">3</div>
        <div id="Menu_apres">4</div>
        <div id="Menu_suivant">5</div>
    </div>
</div>
 
<div id="Detection_survol">Detection survol :</div>
 
</body>
</html>

Code javascript:

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
//<![CDATA[
$(function(){
 
    /* Gestion des déplacements / au menu "tryptique" */
    MoveSlide=160; /* Largeur de chacune des 3 fenêtres */
 
    /******** Gestion / clic sur la partie droite du menu "tryptique" *******/
    $("#Menu_apres").live('click', function(){
 
        $("#Menu_suivant").append('Hello !');
 
        /* Animation du menu vers la gauche */
        MoveSlide=MoveSlide+160;
        $("#slidebox")
        .animate({right: MoveSlide}, 800, function(){
            /* On retire les 2 colonnes non visibles de gauche */
            $('div').remove('#Menu_precedant');
            $('div').remove('#Menu_avant');
 
            /* On renomme les 3 colonnes visibles */
            document.getElementById("Menu_present").id="Menu_avant";
            document.getElementById("Menu_apres").id="Menu_present";
            document.getElementById("Menu_suivant").id="Menu_apres";
            /* Ajout de 2 colonnes (non visibles) à droite  */
            $('<div id="Menu_suivant"></div>').insertAfter('#Menu_apres');
            $('<div id="Menu_precedant"></div>').insertBefore('#Menu_avant');
 
            MoveSlide=MoveSlide-160;
            $('#slidebox').css('right', MoveSlide);
 
        })
 
    });
 
    $("#Menu_apres").live('mouseenter', function(){
        $('#Detection_survol').append("*Détection ok ! ");	
    });
 
});
//]]>

Code CSS

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
 
#Menu_apres:hover
{
    color: #DA642C; 
    border:1px solid #ED7B45;
}
 
#Container_ext
{
    overflow:hidden;
    position: absolute;
    left: 160px;
    top: 90px;
    width: 480px;
    height: 400px;
    border: 5px solid #7F4339;
}
 
#slidebox
{
    position:relative;
    width:5000px;
    right:160px;
}
 
#Menu_precedant
{ 
    width: 160px; 
    height: 400px;
    float: left; 
    background-color: #FFE0C1;
    border-right: 1px solid #B2B2B2;
    font-size: 13px;
}
 
#Menu_avant 
{ 
    cursor: pointer;
    width: 160px; 
    height: 400px; 
    float: left; 
    background-color: #FFE0C1;
    border-right: 1px solid #B2B2B2;
    font-size: 13px;
}
 
#Menu_present 
{ 
    width: 160px; 
    height: 400px; 
    float: left; 
    background-color: #FFD9B3;
    border-right: 1px solid #B2B2B2;
    font-size: 13px;
    color: #9B4D13;
}
 
#Menu_apres 
{ 
    cursor: pointer;
    width: 160px; 
    height: 400px; 
    float: left; 
    background-color: #FED1A5;
    border-right: 1px solid #969696;
    font-size: 13px;
}
 
#Menu_suivant
{ 
    width: 160px; 
    height: 400px; 
    float: left; 
    background-color: #FED1A5;
    border-right: 1px solid #969696;
    font-size: 13px;
}