18041 sujets

Questions générales et questions de débutants

[Résolu] Lien dans un rond réactif apparition d un texte

Bonjour,
Voila longtemps que je ne suis venue, Smiley confused
Alors mon problème: testez le résultat du code ci-dessous
http://www.fox-infographie.com/rond_reactif_alsa.htm
Mon code est le suivant:

<!DOCTYPE HTML><html ><head>
<style>
<!--
html, body {  height: 100%; }
body { background-color : #4d4d4d; font-family :Georgia, "Times New Roman", Times, serif; color :#F08136; 
font-size :28px; text-align :center; }
.mes_ronds{background-position:center top;border:1px solid #ccc;border-radius:50%;box-shadow:inset 3px 3px 4px 0 rgba(0,0,0,0.4);cursor:pointer;display:inline-block;height:250px;margin-bottom:26px;width:250px;}
.mes_ronds:hover{box-shadow:inset 0 0 0 250px rgba(0,0,0,0.3);}
div.centre2blanc { top:0px;height :auto;width :auto; max-width :900px; margin :auto; text-align :center; } 
img { border :2px;}
a.LesA {font-family :"Times New Roman", Times, serif;  font-size :24px !important;color :#eeeeee; text-decoration :none;}
a.LesA:hover { color :#eeaaaa; }
p.Center {  text-align:center;font-family:"Times New Roman", Times, serif; color :#eeeeee; font-size :28px  !important; }
-->
</style>
</head><body>
<div class="centre2blanc" ><br /><br />
<div class="mes_ronds" style="background-image:url('logos/fourneret001250.jpg');"><p class="Center">
<A class="LesA" href="index.php" ><img src='zzz/puce_vide_200_200.gif' class='limg1' /></a></p>
</div></div></body></html>


Mon problème est peut-être simple pour vous, mais je ne parvient pas a avoir en plus de l'effet actuel, un texte qui serait par exemple gris et deviendrais blanc pur en HOVER Smiley decu
Mille mercis d'avance !
Christele a écrit :
Mon problème est peut-être simple pour vous, mais je ne parvient pas a avoir en plus de l'effet actuel, un texte qui serait par exemple gris et deviendrais blanc pur en HOVER Smiley decu
Mille mercis d'avance !

Bonjour Christele
Je ne comprends pas quel est votre problème.
pourriez vous bous expliquer ce que vous essayez de faire? Smiley confus
Merci de ta réponse,
Il y a un lien vers mon test.
Il y a le code complet qui donne ce que tu vois en passant la souris sur mon lien.

Donc tu as tout ce qui concerne l'actuel.

Je voudrais sans changer l'effet actuel que dans le rond apparaisse par exemple
"Nous Joindre" en gris très marqué et qu'au passage de la souris,
1) l'effet actuel agisses,
2) le texte devienne blanc pur .

Voila !
As tu compris 100% ?
A++
Modérateur
Bonjour,

je vous donne une piste:


.mes_ronds {
  color: grey
}
.mes_ronds:hover {
  box-shadow:inset 0 0 0 250px rgba(0,0,0,0.3);
  color: white;
}
Bonjour Christelle,

Tu pourrais mettre ton texte à la place de ton gif Puce_vide. D'ailleurs je ne comprends pas son utilité à cette image.

Une autre solution, dans le cas ou le gif serait important serait de générer un élément avec le sélecteur css ::after et l'attribut content:""


*liens vers W3Schools
Merci à tous, OUI Greg_Lumiére, excuses moi j'avais laissé cela car au HOVER le gif changeait en un même gif avec texte !! ( pas génial) Smiley confused
BRAVO Kustolovic Smiley cligne c'est vraiment incroyable je n'avais pas testé cet évidence !!!

Cela marche 100% SUPER
Sujet clos
Aller à