Heim >Web-Frontend >CSS-Tutorial >So ändern Sie die Farbe beim Klicken in CSS

So ändern Sie die Farbe beim Klicken in CSS

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-04-21 18:17:1728758Durchsuche

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.

So ändern Sie die Farbe beim Klicken in CSS

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:


So ändern Sie die Farbe beim Klicken in CSS2. 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn