[Résolu] Transition pour faire apparaître un élément avec hover

Bonjour à tous !
Je débute tout juste en intégration web : j'ai récemment eu droit, dans le cadre de ma formation en graphisme, à quelques séances d'introduction au HTML et au CSS, donc autant dire que je n'ai fait qu'effleurer la surface de la surface.

Pour le contexte :
Je dois actuellement créer un site sur lequel je mets en page l'extrait d'un mémoire que j'ai déjà rédigé au préalable. Mais le dit mémoire contient un certain nombre de notes de bas de page qui apportent des informations supplémentaires sur quelques mots. J'aimerais adapter ces notes à ce nouveau format web pour qu'elles restent agréables à consulter.

Je suis partie sur cette idée : faire apparaître les notes explicatives à la droite de mon texte en survolant le mot auquel cette note est liée avec le curseur (les notes disparaitraient lorsque le curseur ne survole plus le mot).

Voici un extrait du code HTML que j'ai rédigé avec l'aide de mon formateur :

<p>Le <span class="note">palimpseste<span>Du mot grec ancien palímpsêstos, signifiant « gratté de nouveau »</span></span> est un parchemin dont le texte a été effacé par les <span class="note">copistes<span>personne qui, avant l’invention de l’imprimerie, copiait des manuscrits</span></span> du Moyen Âge à l’aide d’une <span class="note">pierre ponce<span>roche volcanique légère, poreuse, très dure, dont on se sert (parfois après l’avoir réduite en poudre) pour polir, abraser, nettoyer</span></span>, puis recouvert d’un nouveau texte. Il est possible d’en dévoiler, voire décrypter le texte ancien par traitement chimique ou optique.</p>

Ainsi que le CSS pour les propriétés de mon paragraphe, mes balises span et comment elles doivent se comporter lors du survol du curseur :

            p {
                font-size: 25px;
                color: dimgray;
                width: 42%;
                text-align:left;
                margin-left: 25%;
            }
            .note {
                text-decoration: underline;
            }
            .note:hover {
               color: blue;
            }
            .note span {
                opacity: 0;
                transition: opacity 0.2s;
                display: inline;
                position: absolute;
                margin-top: 0.4em;
                left: 70%;
                width: 20%;
                text-decoration: none;
                font-size: 16px;
                color: dimgray;
            }
            .note:hover span {
               opacity: 1;
            }

Mon problème :
L'effet que je recherchais fonctionne, la note apparaît/disparaît avec une petite animation lorsque je passe mon curseur sur le mot auquel elle est reliée dans mon texte, mais la note peut quand-même apparaître si je passe mon curseur sur l'emplacement de cette dernière bien qu'elle soit en opacité minimale.
Je voulais donc savoir s'il existe une solution pour m'assurer que la note apparaisse seulement si je survole le mot auquel elle est reliée, et non pas son emplacement ?
Merci d'avance pour votre aide !

P.S. : Je suis désolée de la longueur de mon message mais j'ai essayé de m'expliquer le plus précisément possible pour faciliter les choses... J'espère avoir été suffisamment claire dans mes explications
P.P.S. : Je sais qu'il doit sûrement exister des solutions en utilisant le Javascript, mais c'est un langage avec lequel je ne suis pas du tout familière et que je n'ai pas abordé dans ma formation, alors j'essaye de faire avec les codes que je connais déjà !
Modifié par Lise_25 (22 Feb 2021 - 13:31)