Discussion :

[Olivier Regnier]

Bonjour,

J'ai l'extrait de code suivant:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<pre class="test"><u>Tu vas bien ?</u> <span class="test2">Oui</span>.</pre>

Au passage de la souris sur 'Oui', je souhaiterai qu'il affiche 'Non'.

Auriez-vous un piste s'il vous plaît ?

Merci

[mathieu]

vous pouvez faire par exemple comme cela :
https://codepen.io/anon/pen/jmbXzK?editors=1100

[Olivier Regnier]

Bonjour

Merci tout d'abord pour cet exemple.

Il donne le résultat escompté mais je constate quelques défaillances sous IE 11.

En effet, lors du passage de la souris sur le mot en question, ça vrille et rien ne s'affiche.

Sous SeaMonkey et/ou Firefox, il n'y a pas de soucis. Dommage, car si l'utilisateur est sous IE, il ne voit rien

[Bisûnûrs]

C'est parce que la valeur initial n'est pas reconnue par IE11 :
http://caniuse.com/#feat=css-initial-value

Tu peux mettre inline à la place, qui correspond à la valeur par défaut d'un span.

[Invité]

Bonjour,

plus simple (moins de class) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<pre class="test"><u>Tu vas bien ?</u>
  <span class="survol"><span>Oui</span><span>Non</span></span>.
</pre>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

.survol:hover span:nth-child(1), .survol:not(:hover) span:nth-child(2) { display : none; }

N.B. :nth-child(1) équivaut à :first-child.

[Olivier Regnier]

Cette deuxième proposition fonctionne correctement.

Cependant, j'ai un petit soucis d'affichage:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<pre class="test"><u>Tu vas bien ?</u> 
  <span class="survol"><a href="#">Oui</a>.<span>Non</span></span>.
</pre>

Lorsque je survole le mot 'Oui', le résultat est le suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.Non

La point ne doit pas figurer dans le lien mais ne doit pas apparaître non plus lorsque le mot 'Non' s'affiche à l'écran

[Invité]

Bonjour,

ce n'est pas difficile de voir que tu as mis 2 "." dans ton code, et aux mauvais endroits...

De plus, à quoi bon mettre un lien (balise <a>), vu qu'il va être masqué (donc non cliquable !) au survol ?

1/ Bref...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<pre class="test"><u>Tu vas bien ?</u>
  <span class="survol"><span><a href="#">Oui</a>.</span><span>Non</span></span>
</pre>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

.survol:hover span:nth-child(1), .survol:not(:hover) span:nth-child(2) { display : none; }

2/ voici une autre approche :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<pre class="test"><u>Tu vas bien ?</u>
  <span class="survol" data="Non"><span><a href="#">Oui</a>.</span></span>
</pre>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.survol:hover span { display:none; }
.survol:hover:before { content:attr(data); }