Methode: 1. Verwenden Sie die Pseudoklasse „:active“ und arbeiten Sie mit der Pseudoklasse „:focus“ zusammen. Sie müssen nur die Pseudoklasse „:active“ und die Pseudoklasse „:focus“ festlegen 2. Verwenden Sie die gleiche Hintergrundfarbe, um die Reihenfolge zu steuern und mit der Pseudoklasse „:focus“ zu arbeiten, um eine Farbänderung nach dem Klicken zu erzielen, ohne zu verschwinden.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Sie können den farbverändernden Effekt angeklickter Elemente erzielen, indem Sie CSS-Pseudoklassen verwenden. Die beiden Pseudoklassen sind: active, :focus
1. Wenn auf einen Link geklickt wird, wird er aktiv (aktiviert). Der :active-Selektor gilt für alle Elemente, nicht nur für die Verknüpfung eines Elements.
:focus: Wird verwendet, um das Element auszuwählen, das den Fokus erhalten hat. Der :focus-Selektor ist nur für Elemente zulässig, die Tastaturereignisse oder andere Benutzereingaben empfangen.
Wenn Sie aufgrund der oben genannten Eigenschaften den Effekt einer Farbänderung beim Klicken erzielen möchten, gibt es die folgenden zwei Methoden Farbe verschwindet nach dem Klicken
:Fokus, das Element wird angeklickt. Es ändert die Farbe nach dem Klicken und die Farbe verschwindet nicht nach dem Klicken
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document</title>
<style>
button:active{
background:olive;
}
button:focus{
background:olive;
}
</style>
</head>
<body bgcolor="#ccc">
<button>cmcc</button>
</body>
</html>Effekt:
2. Da Elemente wie div keine Tastatur oder andere akzeptieren können Benutzerereignisse, das heißt, sie unterstützen die Pseudoklasse :focus nicht. Sie können sie durch Hinzufügen des tabIndex-Attributs erstellen
Das obige ist der detaillierte Inhalt vonSo ändern Sie die Farbe beim Klicken in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
