Als je een website ontwerpt, wil je misschien - de stijl van een element zijn wanneer het door de gebruiker wordt geactiveerd. U wilt bijvoorbeeld de kleur van een knop of link wijzigen wanneer de gebruiker op de knop klikt, of de link
is waar de CSS-pseudoklasse beschikbaar is in:. Actief. Met de actieve pseudo-klasse kunt u elementen selecteren die door de gebruiker zijn geactiveerd en waarop u stijlen kunt toepassen
Deze tutorial zal, met voorbeelden, de basisprincipes van de bijnaam bespreken. CSS -classes en hoe u de actieve pseudo-class in uw code kunt gebruiken. Aan het einde van deze tutorial ben je goed vertrouwd met het gebruik van de actieve pseudo-klasse
CSS-pseudoklassen
In CSS worden selectors gebruikt om te selecteren. de elementen waarop u een stijl of een reeks stijlen wilt toepassen. Met een selector kunt u bijvoorbeeld alle
Zodra de gebruiker is gestopt met klikken op een item, zal het item niet langer "ingeschakeld" zijn. Het item wordt dus niet geselecteerd door de actieve kiezer. wanneer de gebruiker stopt om op een element te klikken
CSS: actieve voorbeelden
laat twee voorbeelden achter om te illustreren hoe de pseudo-klasse kan worden gebruikt: actief
actieve links
Stel dat je een website ontwerpt voor een lokale kaartspelclub, de Wizards of the Boards. We hebben de opdracht gekregen om .. een "Over oni"-pagina te maken met een link naar een aw-pagina eb lijst met kaartspellen gespeeld door clubleden.
standaard moet deze link in lichtblauw worden weergegeven. Wanneer u op deze link klikt, moet de tekstkleur oranje worden. hiervoor kunnen we de pseudo-klasse gebruiken: active. Hier is de code die we zouden gebruiken om de kleur van onze tekst te veranderen door op een link te klikken:
Onze code geeft als resultaat: Klikknop in de getoonde code-editor - hierboven om de uitvoer van onze HTML / CSS
in ons HTML-bestand hebben we een alinea met tekst gedefinieerd met behulp van een
tag die de geschiedenis van Wizards of the Card Game Boards-club beschrijft. In onze
We hebben gewerkt aan een module voor de Wizards of the Game Club Boards-kaart waarmee mensen tonen hun interesse in de club.
Tegen het einde van ons formulier willen we een knop maken die bij zegt "geef uw interesse". Wanneer op deze knop wordt geklikt, moet een oranje rand van 3 pixels breed rond de knop worden aangebracht.
We zouden deze knop kunnen maken met de volgende code:.
Onze code geeft als resultaat: Klikknop in de getoonde code-editor - hierboven om de uitvoer van onze HTML / CSS-code
Laten we onze code analyseren .. In ons HTML-bestand hebben we een knop gedefinieerd met behulp van het knop <>-label. Deze knop bevat de tekst "Verstuur uw interesse.
p>In onze CSS-stylesheet hebben we een regel gedefinieerd die van toepassing is op een knop <>-tag wanneer deze door de gebruiker wordt geactiveerd. Deze regel creëert een ononderbroken rand van 3 pixels breed rond onze knop. Wij gebruiken de. Actieve selector om deze regel alleen toe te passen wanneer de knop actief is
Dus als we op onze knop klikken, verschijnt er een oranje rand en zodra we stoppen met klikken op de knop, verdwijnt de rand
p>
Conclusie
Met de CSS: pseudo-actieve klasse kunt u een element selecteren wanneer het in de "actieve" staat is. Als u eenmaal een actief element hebt geselecteerd, kunt u een stijl of een reeks stijlen op het element toepassen
knop in de getoonde code-editor - hierboven om de uitvoer van onze HTML / CSS