:active
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die :active CSS Pseudoklasse repräsentiert ein Element (wie beispielsweise einen Button), das vom Benutzer gerade aktiviert wird. Bei Verwendung einer Maus beginnt die "Aktivierung" typischerweise, wenn der Benutzer die primäre Maustaste herunterdrückt.
Probieren Sie es aus
.joinBtn {
width: 10em;
height: 5ex;
background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
border: none;
border-radius: 5px;
font-weight: bold;
color: white;
cursor: pointer;
}
.joinBtn:active {
box-shadow: 2px 2px 5px #fc894d;
}
<p>Would you like to subscribe to our channel?</p>
<button class="joinBtn">Subscribe</button>
Die :active-Pseudoklasse wird häufig auf <a>- und <button>-Elemente angewendet. Andere häufige Ziele dieser Pseudoklasse sind Elemente, die in einem aktivierten Element enthalten sind, und Formularelemente, die über ihr zugehöriges <label> aktiviert werden.
Stile, die durch die :active-Pseudoklasse definiert sind, werden von allen nachfolgenden, linkbezogenen Pseudoklassen (:link, :hover, oder :visited) überschrieben, die mindestens die gleiche Spezifität haben. Um Links richtig zu stylen, setzen Sie die :active-Regel nach allen anderen linkbezogenen Regeln, wie durch die LVHA-Reihenfolge definiert: :link — :visited — :hover — :active.
Hinweis:
Bei Systemen mit Mehrtastenmäusen spezifiziert CSS, dass die :active-Pseudoklasse nur auf die primäre Taste angewendet werden muss; bei rechtshändigen Mäusen ist dies typischerweise die linke Taste.
Syntax
:active {
/* ... */
}
Beispiele
Aktive Links
HTML
<p>
This paragraph contains a link:
<a href="#">This link will turn red while you click on it.</a>
The paragraph will get a gray background while you click on it or the link.
</p>
CSS
/* Unvisited links */
a:link {
color: blue;
}
/* Visited links */
a:visited {
color: purple;
}
/* Hovered links */
a:hover {
background: yellow;
}
/* Active links */
a:active {
color: red;
}
/* Active paragraphs */
p:active {
background: #eeeeee;
}
Ergebnis
Aktive Formularelemente
HTML
<form>
<label for="my-button">My button: </label>
<button id="my-button" type="button">Try Clicking Me or My Label!</button>
</form>
CSS
form :active {
color: red;
}
form button {
background: white;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # selector-active |
| Selectors Level 4 # active-pseudo |
Browser-Kompatibilität
Loading…