27431 sujets

CSS et mise en forme, CSS3

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 ! Smiley ravi

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 Smiley sweatdrop
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à ! Smiley confused
Modifié par Lise_25 (22 Feb 2021 - 13:31)
Bonjour @Lise_25,

une solution simple consiste à mettre un z-index: -1; dans .note span.

Après tu as aussi la possibilité de réaliser cela avec un clic sur l'élément. Ce qui peut être plus facile pour le lecteur.

Pour cela il te faut écrire tes notes comme suit:

<span class="note" tabindex="0">palimpseste<span>Du mot grec ancien palímpsêstos, signifiant « gratté de nouveau »</span></span>


Et dans ton CSS tu supprimes la règle:

.note:hover span {
  opacity: 1;
}

que tu remplaces par:

.note:focus span {
  opacity: 1;
}


Voila, en espérant que ça puisse t'aider. Smiley smile
Modifié par Raphi (22 Feb 2021 - 14:05)
Meilleure solution
Merci beaucoup Raphi ! J'ai intégré la propriété z-index: -1; dans mon CSS comme tu me l'as conseillé et ça fonctionne parfaitement ! J'entends que la solution du clic serait plus pratique pour le lecteur (merci par ailleurs d'avoir pris le temps de rédiger un nouveau code pour cette autre solution ! Smiley biggrin ), mais dans ce cas précis, je préférais tout de même le simple survol. Je garde tout de même la propriété focus en tête pour d'autres projets, encore merci !
Avec plaisir.
Bon courage dans ton apprentissage ! Smiley smile