Kann ich einen Onclick-Effekt in CSS haben?

334

Ich habe ein Bildelement, das ich beim Klicken ä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 offensichtlich nicht. Ist es überhaupt möglich, sich onclickin CSS zu verhalten (dh ohne JavaScript zu verwenden)?

Alegro
quelle
7
:activefunktioniert bei gedrückter Maus. Je nachdem, was Sie versuchen, können Sie es möglicherweise mithilfe der CSS4-Pseudoklasse zum Laufen bringen :target.
Bfavaretto
2
:targetist für Selectors 4 nicht neu. Es ist seit Selectors 3 verfügbar, was zum Zeitpunkt des Schreibens bereits eine Empfehlung für ein Jahr war.
BoltClock

Antworten:

313

Der nächste, den Sie bekommen, ist :active:

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

Dies wird jedoch nur angewendet, wenn die Maustaste gedrückt gehalten wird. Der einzige Weg , einen Stil anwenden und halten sie angewendet Onclick ist ein bisschen JavaScript zu verwenden.

Bojangles
quelle
@ Sparky672, so ziemlich alles: caniuse.com/#feat=css-sel2 (IE7 unterstützt: auch aktiv, wird aber nicht aufgelistet, da es einige der anderen Selektoren nicht unterstützt)
jrajav
@ Kiyura, ich denke alles, außer einigen Fehlern in IE 8 und höher .
Sparky
13
Diese Antwort ist veraltet. In der Antwort von TylerH finden Sie eine reine CSS-Lösung.
Maximillian Laumeister
Es gibt eine noch einfachere CSS-Lösung als den Checkbox-Hack von TylerH.
David Ljung Madison Stellar
348

Antwort ab 2019:

Der beste Weg (eigentlich der einzige Weg *), ein tatsächliches Klickereignis nur mit CSS zu simulieren (anstatt nur auf einem Element zu schweben oder ein Element zu aktivieren , wenn Sie nicht mouseUp haben ), ist die Verwendung des Checkbox-Hacks. Es funktioniert, indem ein a über die Beschriftung labelan ein <input type="checkbox">Element angehängt wirdfor="" Attribut wird.

Diese Funktion bietet umfassende Browserunterstützung (die:checked Pseudoklasse ist IE9 +).

Wenden Sie den gleichen Wert auf ein <input>‚s ID - Attribut und ein begleitendes <label>‘ s for=""Attribut, und Sie können den Browser neu Stil sagen , das Etikett auf Klick mit der :checkedPseudo-Klasse, dank der Tatsache , dass ein Etikett klicken , wird prüfen , und deaktivieren Sie die "damit verbundenen"<input type="checkbox"> .

* Sie können ein "ausgewähltes" Ereignis über die :activeoder die :focusPseudoklasse in IE7 + simulieren (z. B. für eine Schaltfläche, die normalerweise 50pxbreit ist, können Sie ihre Breite ändern, während active:) #btnControl:active { width: 75px; }, aber dies sind keine echten "Klick" -Ereignisse. Sie sind während der gesamten Auswahl des Elements "live" (z. B. durch TabDrücken der Tastatur). Dies unterscheidet sich ein wenig von einem echten Klickereignis, bei dem - normalerweise - eine Aktion ausgelöst wird mouseUp.


Grundlegende Demo des Checkbox-Hacks (die grundlegende Codestruktur für das, was Sie fragen):

Hier habe ich das Etikett direkt nach der Eingabe in meinem Markup positioniert. Auf diese Weise kann ich mit dem nebenstehenden Geschwister-Selektor (dem +Schlüssel) nur das Etikett auswählen, das unmittelbar auf mein #demoKontrollkästchen folgt . Da die :checkedPseudoklasse für das Kontrollkästchen gilt, #demo:checked + labelgilt sie nur, wenn das Kontrollkästchen aktiviert ist.

Demo zum Ändern der Größe eines Bilds beim Klicken, was Sie fragen:

#btnControl {
    display: none;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
}
<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="http://placekitten.com/200/140" id="btnLeft" /></label>

Wenn das gesagt ist, gibt es einige schlechte Nachrichten. Da eine Beschriftung jeweils nur einem Formularsteuerelement zugeordnet werden kann, können Sie nicht einfach eine Schaltfläche in die <label></label>Tags einfügen und sie einen Tag lang aufrufen. Wir können es jedoch etwas CSS verwenden, um das Etikett so aussehen zu lassen, dass es dem Aussehen und Verhalten einer HTML-Schaltfläche ziemlich nahe kommt.

Demo zum Imitieren eines Schaltflächenklick-Effekts über das hinaus, was Sie verlangen:

Der größte Teil des CSS in dieser Demo dient nur zum Stylen des Beschriftungselements. Wenn Sie eigentlich keinen Knopf brauchen und ein altes Element ausreicht, können Sie fast alle Stile in dieser Demo entfernen, ähnlich wie in meiner zweiten Demo oben.

Sie werden auch feststellen, dass ich dort eine Eigenschaft mit Präfix habe -moz-outline-radius. Vor einiger Zeit hat Mozilla Firefox diese großartige, nicht spezifikationsgerechte Eigenschaft hinzugefügt, aber die Leute bei WebKit haben entschieden, dass sie sie leider nicht hinzufügen werden. Betrachten Sie diese CSS-Linie als eine progressive Verbesserung für Benutzer von Firefox.

TylerH
quelle
2
Genial! Aber gibt es eine Möglichkeit, die Änderungen auch dann rückgängig zu machen, wenn Sie auf eine andere Stelle als die Eingabe / das Bild / die Schaltfläche klicken? Ich habe Ihr Beispiel verwendet, um ein Popup-Feld zu erstellen, und ich möchte, dass es verschwindet, wenn Besucher auf die leere Seite klicken. Vielen Dank!
mxmehl
1
@mxmehl Wenn Sie möchten, dass sie an einer bestimmten Stelle klicken, können Sie dies wahrscheinlich mit einem anderen benachbarten Geschwisterelement tun. Wenn Sie jedoch möchten, dass es zurückgesetzt wird, indem Sie auf eine leere Stelle auf dem leeren Bildschirm klicken, benötigen Sie wahrscheinlich JavaScript-Ereignis-Listener. Denken Sie daran, dies ist ein Hack und nicht der "beste" Weg, um ein "interaktives" Erlebnis zu schaffen. Das ist , was JS ist für . Dies ist nur so, wenn Sie nur CSS verwenden. :-)
TylerH
5
Diese Lösung ist immer noch nett, aber als ich "Antwort 2017" las, erwartete ich etwas wirklich Cooles (wie eine CSS3-Funktion, die endlich breite Browserunterstützung erhielt), nicht den großen alten Checkbox-Hack, den es seit 2011 gibt ... Etwas enttäuscht .
Christallkeks
3
@Christallkeks Wenn CSS etwas hinzufügt (wahrscheinlich nicht; Interaktivität geht über den Zweck von CSS hinaus), aktualisiere ich die Antwort, um sie einzuschließen. Derzeit lautet die Überschrift "Antwort 2017", um die Leute wissen zu lassen, dass diese Antwort die aktuellste ist. Auf einen Blick werden sie also nicht auf die Tatsache achten, dass die Antwort im Jahr 2015 veröffentlicht wurde, und sagen: "Oh Ich frage mich, ob es noch eine neue Funktion gibt. "
TylerH
1
@MuhammadSaqib Ja, es sollte auf jedem mobilen Browser funktionieren, der dies unterstützt :checked.
TylerH
78

Sie können die Pseudoklasse verwenden :target, um ein Klickereignis nachzuahmen. Lassen Sie mich Ihnen ein Beispiel geben.

#something {
  display: none;
}

#something:target {
  display: block;
}
<a href="#something">Show</a>
<div id="something">Bingo!</div>

So sieht es aus: http://jsfiddle.net/TYhnb/

Beachten Sie, dass dies nur auf Hyperlinks beschränkt ist. Wenn Sie also einen anderen Link als einen Hyperlink verwenden müssen, z. B. eine Schaltfläche, möchten Sie ihn möglicherweise ein wenig hacken, z. B. indem Sie einen Hyperlink so gestalten, dass er wie eine Schaltfläche aussieht.

Hendra Uzia
quelle
8
Wie kehren wir die Aktion um?
Ansyori
Ich dachte, Sie könnten nicht auf etwas zielen, das nicht angezeigt wird.
Hazior
38

Wenn Sie dem Element ein geben tabindex, können Sie das verwenden:focus Pseudoklasse verwenden, um einen Klick zu simulieren.

HTML

<img id="btnLeft" tabindex="0" src="http://placehold.it/250x100" />

CSS

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

http://jsfiddle.net/NaTj5/

Blake Plumb
quelle
2
das funktioniert einigermaßen gut! wenn Sie verwendentabindex=-1 das Element verwenden, ist es weiterhin fokussierbar, jedoch nur mit der Maus, nicht mit der Tastatur, was in diesem Fall besser ist. Sie können auch einen outline:0Stil verwenden, um den blauen Rand zu entfernen, wenn Sie fokussiert sind
Stefan Paul Noack
35

Bearbeiten: Beantwortet, bevor OP klarstellte, was er wollte. Das Folgende gilt für einen Onclick, der javascripts onclick ähnelt, nicht für die Pseudoklasse :active.

Dies kann nur mit Javascript oder dem Checkbox Hack erreicht werden

Mit dem Checkbox-Hack können Sie im Wesentlichen auf ein Etikett klicken, das ein Kontrollkästchen "aktiviert", sodass Sie das Etikett nach Ihren Wünschen gestalten können.

Die Demo

Andy
quelle
1
Sie können Ihre Eingabe auch in das Etikett aufnehmen, damit Sie keine idAttribute verwenden müssen, um sie miteinander zu verbinden.
Stapel
12

TylerH gab eine wirklich gute Antwort und ich musste nur der letzten Button-Version ein Update geben.

#btnControl {
    display: none;
}

.btn {
    width: 60px;
    height: 30px;
    background: silver;
    border-radius: 5px;
    padding: 1px 3px;
    box-shadow: 1px 1px 1px #000;
    display: block;
    text-align: center;
    background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
    font-family: arial;
    font-size: 12px;
    line-height:30px;
}

.btn:hover {
    background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}

.btn:active {
    margin: 1px 1px 0;
    box-shadow: -1px -1px 1px #000;
    background-image: linear-gradient(to top, #f4f5f5, #dfdddd);
}

#btnControl:checked + label {
    width: 70px;
    height: 74px;
    line-height: 74px;
}
<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">Click me!</label>

Einen Sohn
quelle
Schön: aktive Stile; was ich wollte, war aber etwas gehetzt, als ich das Aussehen von ihnen ausbaute.
TylerH
9

Wie wäre es mit einer reinen CSS-Lösung, ohne (das) hackig zu sein?

Geben Sie hier die Bildbeschreibung ein

.page {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #121519;
  color: whitesmoke;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.arrow {
  cursor: pointer;
  transition: filter 0.3s ease 0.3s;
}

.arrow:active {
  filter: drop-shadow(0 0 0 steelblue);
  transition: filter 0s;
}
<body class="page">
  <div class="controls">
    <div class="arrow">
      <img src="https://i.imgur.com/JGUoNfS.png" />
    </div>
  </div>
</body>

@ TylerH hat eine großartige Resonanz, ist aber eine ziemlich komplexe Lösung. Ich habe eine Lösung für diejenigen unter Ihnen, die nur einen einfachen "Onclick" -Effekt mit reinem CSS ohne eine Reihe zusätzlicher Elemente wünschen.

Wir werden einfach CSS-Übergänge verwenden. Ähnliches könnten Sie wahrscheinlich mit Animationen tun.

Der Trick besteht darin, die Verzögerung für den Übergang so zu ändern, dass sie beim Klicken des Benutzers anhält.

.arrowDownContainer:active,
.arrowDownContainer.clicked {
  filter: drop-shadow(0px 0px 0px steelblue);
  transition: filter 0s;
}

Hier füge ich auch die "angeklickte" Klasse hinzu, damit Javascript auch den Effekt liefern kann, wenn es nötig ist. Ich verwende den 0px-Schlagschattenfilter, da er die gegebene transparente Grafik auf diese Weise für meinen Fall blau hervorhebt.

Ich habe hier einen Filter bei 0s, damit er nicht wirksam wird. Wenn der Effekt freigegeben ist, kann ich den Übergang mit einer Verzögerung hinzufügen, so dass ein schöner "angeklickter" Effekt erzielt wird.

.arrowDownContainer {
  cursor: pointer;
  position: absolute;
  bottom: 0px;
  top: 490px;
  left: 108px;
  height: 222px;
  width: 495px;
  z-index: 3;
  transition: filter 0.3s ease 0.3s;
}

Auf diese Weise kann ich es so einrichten, dass beim Klicken des Benutzers auf die Schaltfläche Blau hervorgehoben und dann langsam ausgeblendet wird (Sie können natürlich auch andere Effekte verwenden).

Während Sie hier in dem Sinne eingeschränkt sind, dass die hervorzuhebende Animation sofort erfolgt, bietet sie dennoch den gewünschten Effekt. Sie könnten diesen Trick wahrscheinlich mit Animation verwenden, um einen reibungsloseren Gesamtübergang zu erzielen.

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Braden Rockwell Napier
quelle
FWIW die Komplexität ist notwendig, um einen dauerhaften Klickeffekt zu erzielen. Wenn Sie nur vorübergehend etwas tun möchten, das seinen Zustand nicht beibehält, sind diese oder viele andere Lösungen in Ordnung, und ich stimme definitiv weniger komplex zu.
TylerH
Einverstanden. Alles in allem, was Sie brauchen, um das Endergebnis zu erzielen, und immer gut, um alle Optionen zu kennen. Dies ist sicher ein großartiger Thread für diejenigen. Wahrscheinlich einen ganzen mittleren Artikel wert, der sich mit jedem und den Vorteilen von jedem befasst!
Braden Rockwell Napier
8

Okay, dies ist vielleicht ein alter Beitrag ... aber er war das erste Ergebnis in Google und entschied sich, einen eigenen Mix daraus zu machen als ..

Zuerst werde ich FOCUS verwenden

Der Grund dafür ist, dass es für das Beispiel, das ich zeige, gut funktioniert. Wenn jemand ein Ereignis vom Typ "Maus nach unten" möchte, verwenden Sie es Aktiv"

DER HTML-CODE:

<button class="mdT mdI1" ></button>
<button class="mdT mdI2" ></button>
<button class="mdT mdI3" ></button>
<button class="mdT mdI4" ></button>

DER CSS-CODE:

/* Change Button Size/Border/BG Color And Align To Middle */
    .mdT {
        width:96px;
        height:96px;
        border:0px;
        outline:0;
        vertical-align:middle;
        background-color:#AAAAAA;
    }
    .mdT:focus {
        width:256px;
        height:256px;
    }

/* Change Images Depending On Focus */
    .mdI1       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img1');     }
    .mdI1:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+1');   }
    .mdI2       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img2');     }
    .mdI2:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+2');   }
    .mdI3       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img3');     }
    .mdI3:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+3');   }
    .mdI4       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img4');     }
    .mdI4:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+4');   }

JS FIDDLE LINK: http://jsfiddle.net/00wwkjux/

Warum poste ich das in einem alten Thread, weil die Beispiele hier unterschiedlich sind und ich dachte, ich würde der Community eines zurückgeben, was ein funktionierendes Beispiel ist.

Wie bereits vom Thread-Ersteller beantwortet, soll der Effekt nur während des Klickereignisses anhalten. Nun, während dies für dieses Bedürfnis nicht genau ist, ist es nahe. active wird animiert, während die Maus gedrückt ist, und alle Änderungen, die Sie länger benötigen, müssen mit Javascript vorgenommen werden.

Wütend 84
quelle
1
Für jeden, der liest, trotzdem, um es umzuschalten? Oder verlangt das zu viel von CSS lol?
DardanM
Soweit ich weiß, ist der Fokus / Aktiv / Schweben so nah wie möglich an CSS. Möglicherweise können Sie mit einer Option / einem ausgewählten Codetyp etwas Besonderes tun. Aber das haben Sie noch nicht versucht / gebraucht
Wütend 84
7

Warnung! Besonders einfache Antwort unten! :) :)

Sie können tatsächlich eine Änderung vornehmen, die bestehen bleibt (z. B. ein Block / Popup, der nach einem Klick angezeigt wird und sichtbar bleibt), und zwar nur mit CSS (und ohne Verwendung des Kontrollkästchen-Hacks), obwohl viele der (ansonsten korrekten) Antworten hier so lange behaupten da Sie nur während des Schwebefluges Ausdauer brauchen.

Schauen Sie sich also die Antworten von Bojangles und TylerH an, wenn diese für Sie funktionieren, aber wenn Sie eine einfache und nur CSS-Antwort wünschen, die einen Block nach dem Klicken sichtbar hält (und den Block sogar mit einem nachfolgenden Klick verschwinden lassen kann), dann siehe diese Lösung.

Ich hatte eine ähnliche Situation, ich brauchte ein Popup-Div mit onClick, in dem ich kein JS hinzufügen oder das Markup / HTML (eine echte CSS-Lösung) ändern konnte, und dies ist mit einigen Einschränkungen möglich. Sie können den Trick: target nicht verwenden, mit dem ein schönes Popup erstellt werden kann, es sei denn, Sie können den HTML-Code (um eine 'ID' hinzuzufügen) so ändern, dass er nicht mehr angezeigt wird.

In meinem Fall war das Popup-Div im anderen Div enthalten, und ich wollte, dass das Popup über dem anderen Div angezeigt wird. Dies kann mithilfe einer Kombination aus: active und: hover: erfolgen.

/* Outer div - needs to be relative so we can use absolute positioning */
.clickToShowInfo {
    position: relative;
}
/* When clicking outer div, make inner div visible */
.clickToShowInfo:active .info { display: block; }
/* And hold by staying visible on hover */
.info:hover {
    display: block;
}
/* General settings for popup */
.info {
    position: absolute;
    top: -5;
    display: none;
    z-index: 100;
    background-color: white;
    width: 200px;
    height: 200px;
}

Beispiel (sowie eines, bei dem Sie auf das Popup klicken können, um es verschwinden zu lassen) unter:

http://davesource.com/Solutions/20150324.CSS-Only-Click-to-Popup-Div/

Ich habe unten auch ein Code-Snippet-Beispiel eingefügt, aber die Positionierung in der Stackoverflow-Sandbox ist seltsam, sodass ich den Text "Hier klicken" nach innerDiv setzen musste, was normalerweise nicht benötigt wird.

/* Outer div - needs to be relative so we can use absolute positioning */
	.clickToShowInfo {
		position: relative;
	}
	/* When clicking outer div, make inner div visible */
	.clickToShowInfo:active .info { visibility: visible; }
	/* And hold by staying visible on hover */
	.info:hover {
		visibility: visible;
	}
	/* General settings for popup */
	.info {
		position: absolute;
		top: -10;
		visibility: hidden;
		z-index: 100;
		background-color: white;
		box-shadow: 5px 5px 2px #aaa;
		border: 1px solid grey;
		padding: 8px;
		width: 220px;
		height: 200px;
	}
	/* If we want clicking on the popup to close, use this */
	.info:active {
		visibility: hidden;	/* Doesn't work because DCEvent is :active as well */
		height: 0px;
		width: 0px;
		left: -1000px;
		top: -1000px;
	}
<p />
<div class="clickToShowInfo">
	<div class="info">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
	</div>
	Click here to show info
</div>
<p />

David Ljung Madison Stellar
quelle
1
(bezüglich unserer Kommentardiskussion zuvor) Das Info-Div bleibt nach mouseUp in Firefox nicht sichtbar. Während es in anderen Browsern (IE, Edge, Chrome) nach mouseUp sichtbar bleibt, bleibt es nicht bestehen, wenn die Maus in einem anderen Browser aus der Box entfernt wird, wodurch verhindert wird, dass sie als echtes "Onclick" -Ereignis betrachtet wird ( zB eine anhaltende Veränderung).
TylerH
2

Ich habe den folgenden Code für Mauszeiger 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 verbirgt das Bild, wenn Sie darauf klicken:

.thumbnail:active span {
    visibility: hidden;
}
Pir Fahim Shah
quelle
2

Ich hatte ein Problem mit einem Element, das beim Schweben ROT und beim Klicken BLAU BLAU sein musste. 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 herausfand, dass die Reihenfolge der CSS-Selektoren das Problem war, das ich hatte. Das Problem war, dass ich die Plätze gewechselt habe und der aktive Selektor nicht funktionierte. Dann fand ich heraus, dass :hoverich zuerst und dann gehen sollte :active.

Bereits aufgenommen
quelle
-3

Sie können verwenden: Ziel

für allgemeines Ziel

:Ziel

oder nach Klassennamen filtern

Klassenname: Ziel

oder nach ID-Namen filtern

#idname: Ziel

<style>

#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;
}

</style>


<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>
Hatem Badawi
quelle
2
Eine Antwort zur Verwendung :targetist bereits veröffentlicht, sodass keine weitere erforderlich ist. Darüber hinaus fragt der Fragesteller, wie ein "Onclick" -Effekt erzielt werden soll, ohne andere Elemente ein- oder auszublenden.
Ason
Dies ist eher ein "Onload" als ein "Onclick" -Effekt.
TylerH