Steve TENZA
Intervient pour votre site internet
J'ai créé un CSS simple dans le but de démontrer la méthode permettant de colorer l'arrière-plan de l'étoile n°1 lorsque l'on survole cette dernière, de colorer les étoiles 1 et 2 si l'on survole la 2ème étoile, et ainsi de suite.
Tenez compte du fait qu'il peut être amélioré visuellement, ici le style est uniquement pour le test.
<span class="C2etoiles"><div>1</div>
<span class="C2etoiles"><div>2</div>
<span class="C2etoiles"><div>3</div>
<span class="C2etoiles"><div>4</div>
<span class="C2etoiles"><div>5</div> <!-- les div ici permettent l'affichage de l'étoile via la propriété "content", avec le sélecteur ".C2etoiles div::after" -->
</span>
</span>
</span>
</span>
</span>
.C2etoiles{
background: red;
display: inline-block;
cursor: pointer;
}
.C2etoiles:hover{
background: green;
}
.C2etoiles div{
display: inline-block;
padding: 5px;
}
.C2etoiles div::after{
content:"\002605"; /* une étoile en Unicode */
}
J'espère que ce script gratuit vous est utile.Pour soutenir mon travail, un simple don ou mettre une note est grandement apprécié.
Vous cherchez à pousser encore plus loin vos idées ou à les concrétiser avec un site internet sur mesure ? Je suis là pour vous aider ! Mon expérience en développement web est à votre disposition.
Que ce soit la création de votre site web pro ou l'apport de fonctionnalités avancées à votre projet, contactez-moi pour en discuter et avoir un devis gratuit personnalisé.
Mon objectif est de vous offrir des solutions sur mesure qui répondent à vos besoins, et votre vision associée à mon expertise donnera vie à votre projet web parfait. Contactez-moi aujourd'hui, je réponds en général en moins d'une heure :
Demander un devis