Récupération du contenu spam au survole d'un bloc

LetItGo
Javascript

Bonjour,

J'ai créé différent bloc (li) bien séparé grâce au CSS. Au survol de l'un deux, je souhaite récupérer le contenu de la span (qui est un numéro) du bon bloc grâce à Jquery.
Je ne suis pas sur d'être très clair dans mes propos.
Voici le code HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="Content-Language" content="fr"/>
        <link rel="stylesheet" href="CSS/intranet.css" media="screen"/>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/menuIntranet.js"></script>
        <script type="text/javascript" src="js/jquery-dernier.js"></script>
    </head>
    <body>
        <div id="intranet">
            <h1>blabla</h1>

            <ul id="menu" class="menu">

                <li>
                    <a href="#">
                        <img src="img/espaceNews.jpg" alt=""/>
                        <div class="menuActive" id="menuActive1">
                            <span>1</span>
                            <h2 class="titre">News</h2>
                            <p class="description">Les dernières news</p>
                        </div>
                        <div class="menuDesactive" id="menuDesactive1">
                            <h2 class="titre">News</h2>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <img src="img/espaceCalendrier.jpg" alt=""/>
                        <div class="menuActive" id="menuActive2">
                            <span>2</span>
                            <h2 class="titre">Calendrier</h2>
                            <p class="description">Les prochaines dates à ne pas manquer</p>
                        </div>
                        <div class="menuDesactive" id="menuDesactive2">
                            <h2 class="titre">Calendrier</h2>
                        </div>
                    </a>
                    <div class="liens">
                        <a href="#">C</a>
                        <a href="#">D</a>
                        <a href="#">S</a>
                    </div>
                </li>

                <li>
                    <a href="#">
                        <img src="img/espaceDocuments.jpg" alt=""/>
                        <div class="menuActive" id="menuActive3">
                            <span>3</span>
                            <h2 class="titre">Documents</h2>
                            <p class="description">Tous les documents</p>
                        </div>
                        <div class="menuDesactive" id="menuDesactive3">
                            <h2 class="titre">Documents</h2>
                        </div>
                    </a>
                    <div class="liens">
                        <a href="#">C</a>
                        <a href="#">A</a>
                        <a href="#">A</a>
                    </div>
                </li>   

            </ul>
        </div>
    </body>
</html>

Pourriez-vous m'aider?
merci d'avance.

2 réponses

MrGuillou
Réponse acceptée

Bonjour,
Si le span n'est pas là pour le coté visuel, il y en a pas besoin. Il faut juste que tu récupère ton id

jQuery(document).ready(function($){
                $('#menu li').mouseover(function(){
                    var id = $(this).find(".menuActive").attr('id').substring(10);
                    alert(id);
                });
            });

si tu veux quand même garder ton span 

jQuery(document).ready(function($){
                $('#menu li').mouseover(function(){
                    var content = $(this).find(".menuActive span").html();
                    alert(content);
                });
            });

PS : Je ne sais pas si tu as vu, mais dans le header de ton code, il y a quelques information sur toi.

LetItGo
Auteur

Merci pour TOUTES les infos ! ^^