Ik vraag me af of dit mogelijk is. Bijvoorbeeld deze icoontjes:

<a href="#"><span class="fa fa-star" style="color:gold;"></a>
<a href="#"><span class="fa fa-star" style="color:gold;"></a></span>
<a href="#"><span class="fa fa-star" style="color:gold;"></a></span>
<a href="#"><span class="fa fa-star" style="color:gold;"></a></span>
<a href="#"><span class="fa fa-star-o" style="color:gold;"></a></span>

Is het mogelijk als je de muis op het icoontje houd, dat het icoontje in fa fa-star-o verandert wordt?
En als dit mogelijk is. Hoe?
HTML

<div>
<span class='glyphicon glyphicon-heart-empty' data-clicked="false" aria-hidden='true'></span> I love PHPhulp
</div>


JavaScript (jQuery)

$("div").hover(function () {
    // hover in      
    var icon = $("span.glyphicon", this);
    var remCls =  "glyphicon-heart-empty",
    addCls =  "glyphicon-heart"
    icon
      .removeClass(remCls)
      .addClass(addCls);
}, function () {
    // hover out
    var icon = $("span.glyphicon", this);
    var remCls = "glyphicon-heart",
    	addCls = "glyphicon-heart-empty"
    icon
    .removeClass(remCls)
    .addClass(addCls);
});


Zie ook:
https://jsfiddle.net/b1gc4a7g/1/
Bedankt het is gelukt. Is het ook mogelijk om de eerste en tweede te veranderen mee te veranderen met de derde als je de muis op de derde houd?
Het is gelukt om de sterretjes te krijgen.
Nu probeer ik dat als ik mijn muis op de tweede houd, de eerste ook verandert.
Ik ben echt een CSS noob en begrijp de code waar ik mee werk niet echt.
Hopelijk kan iemand mij dit uitleggen:


.btn-warning .fa-star,
.btn-warning:hover .fa-star-o {
    display: none;
}
.btn-warning:hover .fa-star {
    display: inline;
}


Dit werkt en maakt 1 sterretje gekleurd.
Nu probeer ik op de volgende manier ook de 1e te kleuren wanneer je hem op de tweede houdt, maar dit lukt niet. Wat doe ik verkeerd?


.btn-warning2 .fa-star,
.btn-warning2:hover .fa-star-o {
    display: none;
}
.btn-warning2:hover .fa-star {
    display: inline;
}
.btn-warning:hover .fa-star-o {
    display: none;
}
.btn-warning:hover .fa-star {
    display: inline;
}    
<a href="#" class="btn-warning">
                  <span class="fa fa-star-o" style="color:gold;" title="Rate this thread with 1 star"></span>
                  <span class="fa fa-star" style="color:gold;" title="Rate this thread with 1 stars"></span>
                  </a>
                  <a href="#" class="btn-warning2">
                  <span class="fa fa-star-o" style="color:gold;" title="Rate this thread with 2 stars"></span>
                  <span class="fa fa-star" style="color:gold;" title="Rate this thread with 2 stars"></span>
                  </a>


Laat de techniek ff los en maak een spec, los van allerlei andere rompslomp.

Wat moet er gebeuren als je over een ster hovert:
1. alle sterren moeten eerst inactief gemaakt worden, zodat je met een schone lei begint (initialisatie).
2. alle sterren tot en met de ster waar je over hovert moeten ingekleurd worden.

Goed, nu je een duidelijk idee hebt over wat er moet gebeuren kun je dit op duizend-en-één manieren uitrollen.

Succes.
Beetje simpel antwoord.. Er wordt nu maar 1 sterretje gekleurd als ik eroverheen hover zoals ik al aan had gegeven.
Verder heb ik ook aangegeven dat ik er mee vast zit. Dat er in joun woorden duizen-en-één manieren zijn had ik mijzelf ook al bedacht. Als ik zou weten hoe zou ik dit topic niet aanmaken.
Gebruik JavaScript, bijvoorbeeld jQuery, stop de iconen in een container-element, hanteer een slimme naamgeving zodat je weet over welke ster wordt gehovered, kleur alle sterren voor die ster in door de klassen aan te passen. Moet ik het nog meer voorkauwen?

Het probleem is hier niet het probleem, maar het is de benadering/aanpak/het tacklen van het probleem.

Daarnaast de realisatie dat je vraagstuk niet uniek is. Een heleboel anderen stonden voor deze "barrière". Als je 5 minuten Googled heb je waarschijnlijk ook tig oplossingen.

De reden dat ik dit (en het vorige) antwoord (in deze vorm) geef is dus niet zozeer vanwege dit specifieke probleem, maar meer omdat je wel erg vaak naar een reeds bekende weg vraagt. Nu is het tijd dat je zelf een beetje leert kaartlezen, je hebt van jezelf genoeg bagage om dit op te lossen.
Bedankt. maar Voorkauwen? Wat doe je op een hulp forum als je niet bereid bent dit te geven in sommige gevallen en helpen zelfs voorkauwen noemt? Ookal stel ik een vaker gestelde vraag. Ik heb zeker gegoogled en niks gevonden. Anders kwam ik niet hier.

Thomas van den Heuvel op 13/03/2018 16:26:22

De reden dat ik dit (en het vorige) antwoord (in deze vorm) geef is dus niet zozeer vanwege dit specifieke probleem, maar meer omdat je wel erg vaak naar een reeds bekende weg vraagt. Nu is het tijd dat je zelf een beetje leert kaartlezen, je hebt van jezelf genoeg bagage om dit op te lossen.


Dus als jij vindt dat iemand vaker veel gestelde vragen stelt? dan geef je opeens zo een antwoord? No offense maar ik vind het een beetje vreemd..

Reageren