Problème de focus sur ma notation

Problème de focus sur ma notation - HTML/CSS - Programmation

Marsh Posté le 14-08-2015 à 13:32:17    

Bonjour,
 
J'ai créé un système de notation perso pour mon site. Tout fonctionne sauf que le focus s'enlève de ma notation et on ne sait plus la note qu'on a attribué à part si on va voir dans l'url car j'ai mit une ancre qui change en fonction du clic sur les liens.
 
Donc lorsque je clique sur mon lien qui correspond à ma note 1 => href="#1" => JS ( ....valut = '1' ). Tout est bon sauf que lorsque je clique ailleurs je ne vois plus la note attribué. Le focus reprend sa couleur de départ, le gris ( Gris => clique => orange => clique ailleurs => revient à gris ).
 
Code :
 

Code :
  1. HTML5:
  3.         echo'<div class="rating">';
  4.            echo'<a href="#5" onclick="Objet.note5();">H</a>';
  5.            echo'<a href="#4" onclick="Objet.note4();">H</a>';
  6.            echo'<a href="#3" onclick="Objet.note3();">H</a>';
  7.            echo'<a href="#2" onclick="Objet.note2();">H</a>';
  8.            echo'<a href="#1" onclick="Objet.note1();">H</a>';
  9.         echo'</div>';
  13. JS:
  15. note1 : function(){
  16.         var noteUn = document.getElementById('note').value = 1;
  17.     },
  18.     note2 : function(){
  19.         var noteDeux = document.getElementById('note').value = 2;
  20.     },
  21.     note3 : function(){
  22.         var noteTrois = document.getElementById('note').value = 3;
  23.     },
  24.     note4 : function(){
  25.         var noteQuatre = document.getElementById('note').value = 4;
  26.     },
  27.     note5 : function(){
  28.         var noteCinq = document.getElementById('note').value = 5;
  29.     },
  33. CSS3:
  35. .rating a {
  36.    float: right;
  37.    color: #aaa;
  38.    text-decoration: none;
  39.    font-size: 3em;
  40.    transition: color .4s;
  41.    font-family: 'neoretrodrawregular';
  42. }
  43. .rating :hover,
  44. .rating a:focus,
  45. .rating a:hover ~ a,
  46. .rating a:focus ~ a {
  47.    color: #F68A53;
  48.    cursor: pointer;
  49. }
  50. .rating {
  51.    direction: rtl;
  52. }
  53. .rating a {
  54.    color: #aaa;
  55.    text-decoration: none;
  56.    font-size: 2.5em;
  57.    transition: color .4s;
  58. }
  59. .rating a:hover,
  60. .rating a:focus,
  61. .rating a:hover ~ a,
  62. .rating a:focus ~ a {
  63.    color: #F68A53;
  64.    cursor: pointer;
  65. }


 
Si quelqu'un peut me donner une solution à mon problème je suis preneur ! CSS ou JS je prends.
 
Merci !


---------------
L'écoconception n'est pas négociable - Topic habitats de demain : https://tinyurl.com/y5h2mjx7
Reply

Marsh Posté le 14-08-2015 à 13:32:17   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed