Kann ich einen Onclick-Effekt in CSS haben?

Question

Ich habe ein Bildelement, das ich bei einem Klick ändern möchte.

<img id="btnLeft">

Das funktioniert:

#btnLeft:hover {
    width: 70px;
    height: 74px;
}

Aber was ich brauche, ist:

#btnLeft:onclick {
    width: 70px;
    height: 74px;
}

Aber es funktioniert natürlich nicht. Ist es überhaupt möglich, eine onclick Verhalten in CSS (d. h. ohne Verwendung von JavaScript)?

Answer 1

Ich hatte ein Problem mit einem Element, das gefärbt werden musste rot beim Schweben und be blau bei einem Klick, während der Mauszeiger darüber schwebt. Um dies mit CSS zu erreichen, benötigen Sie zum Beispiel:

h1:hover { color: red; }
h1:active { color: blue; }

<h1>This is a heading.</h1>

Ich kämpfte einige Zeit, bis ich entdeckte, dass die Bestellung von CSS-Selektoren war das Problem, das ich hatte. Das Problem bestand darin, dass ich die Orte gewechselt habe und der aktive Selektor nicht funktionierte. Dann fand ich heraus, dass :hover zuerst zu gehen und dann :active .

Answer 2

Ich habe den folgenden Code für Maus-Hover und Mausklick und es funktioniert:

//For Mouse Hover
.thumbnail:hover span{ /* CSS for enlarged image */
    visibility: visible;
    text-align: center;
    vertical-align: middle;
    height: 70%;
    width: 80%;
    top: auto;
    left: 10%;
}

Und dieser Code blendet das Bild aus, wenn Sie darauf klicken:

.thumbnail:active span {
    visibility: hidden;
}

Answer 3

Je nachdem, was Sie vorhaben, könnte es eine Option sein, den Fokus auf die Veränderung zu legen.

<button></button>

<style>
  button {
    width: 140px;
    height: 70px;
    background: url('http://www.ranklogos.com/wp-content/uploads/2015/06/Stack-Overflow-Logo.png');
    background-size: cover;
  }

  button:focus {
    width: 240px;
    height: 120px;
  }
</style>

https://jsfiddle.net/anm92d0r/

Beachten Sie, dass dies nicht mit dem Bild-Tag funktioniert. Aber nach Ihrer Element-ID zu urteilen, ich nehme an, Sie sind auf der Suche nach Button-Funktionalität.

Answer 4

Sie können verwenden :target .

Um nach Klassennamen zu filtern, verwenden Sie .classname:target .

Oder filtern Sie nach dem ID-Namen mit #idname:target .

#id01:target {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msg {
    display: none;
}

.close {
    color: white;
    width: 2rem;
    height: 2rem;
    background-color: black;
    text-align: center;
    margin: 20px;
}

<a href="#id01">Open</a>

<div id="id01" class="msg">
    <a href="" class="close">&times;</a>
    <p>Some text. Some text. Some text.</p>
    <p>Some text. Some text. Some text.</p>
</div>