Kann ich ein onclick-Effekt in CSS?
Habe ich ein Bild-element, das ich ändern wollen klicken Sie auf.
<img id="btnLeft">
Dies funktioniert:
#btnLeft:hover {
width:70px;
height:74px;
}
Aber was ich brauche ist:
#btnLeft:onclick {
width:70px;
height:74px;
}
Aber, es funktioniert nicht, offensichtlich. Ist es überhaupt möglich zu haben onclick
Verhalten in CSS (also ohne Verwendung von JavaScript)?
:active
arbeitet, während die Maustaste gedrückt ist. Je nachdem, was Sie zu tun versuchen, können Sie in der Lage sein, um es arbeiten mit dem CSS4 pseudo-Klasse:target
.:target
ist nicht neu-Selektoren 4. Es hat seit der Selektoren 3, die bereits eine Empfehlung für einen Jahr zu der Zeit des Schreibens.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Die nächste bekommen Sie ist
:active
:Dies ist allerdings nur der Stil angewendet werden, wenn die Maustaste gedrückt ist. Der einzige Weg, um einen Stil anwenden und zu halten es galt onclick ist ein wenig JavaScript.
Antwort ab 2019:
Der beste Weg (eigentlich der einzige Weg,*) zu simulieren eine tatsächliche klicken Sie auf Veranstaltung mit nur CSS (eher als nur schweben auf ein element oder element active, in denen Sie nicht mouseUp) ist die Verwendung der checkbox-hack. Es funktioniert durch anfügen einer
label
zu einem<input type="checkbox">
element über das labelfor=""
Attribut.Diese Funktion hat Breite browser-Unterstützung (die
:checked
pseudo-Klasse ist ab IE9+).Gelten die gleichen Werts zu einem
<input>
's ID-Attribut und einem dazugehörigen<label>
'sfor=""
- Attribut, und Sie können feststellen, dass der browser neu Stil das label auf klicken Sie mit deraktiviert
pseudo-Klasse, Dank der Tatsache, dass beim klicken auf ein label prüfen und deaktivieren Sie das Kontrollkästchen "verbunden"<input type="checkbox">
.* Sie können simulieren, eine "selected" - event über die
:active
oder:focus
pseudo-Klasse im IE7+ (z.B. für einen button, der normalerweise50px
breit, können Sie seine Breite, währendactive
:#btnControl:active { width: 75px; }
), aber diese sind nicht wahr "klicken Sie auf" Ereignisse. Sie sind "live" wird die gesamte Zeit, in der das element ausgewählt wird (wie durch Tabbing mit der Tastatur), die ist ein wenig anders als ein echter Klick-Ereignis, das feuert eine Aktion auf - in der Regel -mouseUp
.Basic-demo-checkbox-hack (der grundlegende code-Struktur für das, was Sie gefragt haben):
CSS:
HTML:
Habe ich hier positioniert das Etikett direkt nach dem Eingang in meinem markup. Dies ist so, dass ich das adjacent sibling selector (die + - Taste), um nur die label, die unmittelbar folgt meine
#demo
checkbox. Da die:checked
pseudo-Klasse gilt für die checkbox -#demo:checked + label
wird nur gelten, wenn die checkbox aktiviert ist.Demo für re-sizing ein Bild an klicken, das, was Sie fordern:
CSS:
HTML:
Mit, dass gesagt wird, es ist einige schlechte Nachrichten. Denn ein label kann nur im Zusammenhang mit einem Formular-Steuerelement, das heißt, Sie können nicht einfach einen button in das
<label></label>
tags und nennen es einen Tag. Aber wir kann Verwendung einigen CSS, um das label sehen aus und Verhalten sich ziemlich in der Nähe, wie ein HTML-button aussieht und sich verhält.Demo für die Nachahmung einer Schaltfläche click-Effekt, über das hinaus, was Sie gefragt haben:
CSS:
HTML:
Meisten der CSS-Code in dieser demo ist nur für das styling der label-element. Wenn Sie nicht wirklich brauchen eine Taste, und jede alte element ausreichen, dann können Sie entfernen fast alle Stile, die in dieser demo, ähnlich wie mein zweites demo vor.
Werden Sie auch feststellen, ich habe eine Präfix-Eigenschaft gibt, ist
-moz-outline-radius
. Eine Weile zurück, Mozilla hat diese awesome non-spec-Eigenschaft zu Firefox, aber die Leute bei WebKit entschieden Sie nicht gehen, um es hinzuzufügen, leider. Also denken Sie, dass Zeile der CSS nur ein progressive enhancement für die Leute die Firefox verwenden.:checked
.:target
, sobald Sie auf den link zum anzeigen der div, können Sie nicht unshow div; Sie ' re mit es stecken. Wenn alles, was Sie tun möchten ist ein einmalige, irreversible repaint, dann sicher,:target
funktionieren wird, aber wenn du willst, was onclick gibt Sie, die eine umsetzbare Ereignis, das kann in beide Richtungen gehen, eine unbegrenzte Anzahl von Zeiten, ist es nicht genug.href="#"
wird den trick tun. Und den guten link gezeigt werden können, je nachdem, was Sie brauchen:#showme:target ~ [href="#"] { display: block; }
machen die Verknüpfung ermöglicht Ihnen, es zu verbergen, erscheinen, zum Beispiel.Können Sie pseudo-Klasse
:target
zu imitieren Ereignis klicken, lassen Sie mich Ihnen ein Beispiel geben.CSS:
HTML:
Hier ist, wie es aussieht: http://jsfiddle.net/TYhnb/
Eine Sache zu beachten, diese ist nur begrenzt auf hyperlink, also, wenn Sie brauchen, um den Einsatz auf anderen als hyperlink wie einen button, möchten Sie vielleicht, es zu hacken, ein wenig, wie styling einen hyperlink zu wie eine Schaltfläche Aussehen.
Geben, wenn Sie das element
tabindex
dann können Sie die:focus
pseudo-Klasse zu simulieren klicken.HTML
CSS
http://jsfiddle.net/NaTj5/
tabindex=-1
den Artikel noch Isoliertes, sondern nur per Maus, nicht die Tastatur, die ist in diesem Fall besser. Sie können auch eineoutline:0
Stil zu entfernen, die Blaue Grenze, wenn konzentriertEdit: Beantwortet vor der OP geklärt, was er wollte. Der folgende Code ist für ein onclick-ähnlich wie javascripts onclick, nicht die
:active
pseudo-Klasse.Dies kann nur erreicht werden, entweder mit Javascript oder dem Checkbox-Hack
Den checkbox-hack im wesentlichen wird Sie zum klicken auf ein label, dass "Prüfungen" - ein Kontrollkästchen, so dass Sie Stil das label wie Sie es wünschen.
Den demo
id
Attribute zu binden Sie zusammen.TylerH machte eine wirklich gute Antwort, und ich musste zu geben, dass die Letzte Schaltfläche-version ein update.
CSS:
HTML:
Okay, das vielleicht ein Alter Beitrag... aber das war das erste Ergebnis in google, und entschieden, um Ihren eigenen mix zu diesem wie..
ERSTENS VERWENDE ICH DEN FOKUS
Der Grund dafür ist, dass es funktioniert gut für das Beispiel zeige ich, wenn jemand will, ein mouse-down-Ereignis vom Typ, dann verwenden Sie aktiv
DEN HTML-CODE:
DEN CSS-CODE:
JS FIDDLE LINK: http://jsfiddle.net/00wwkjux/
Also warum soll ich dieses posting im alten thread, auch, weil die Beispiele, die hier variieren und ich dachte, um zurück zu der Gemeinschaft, die ist ein funktionierendes Beispiel.
Als bereits beantwortet durch den thread-Ersteller, Sie wollen nur die Dauer des Effekts, während das click-Ereignis. Jetzt, während dies ist nicht genau für das brauchen, seine Nähe. aktiv werden animiert, während die Maustaste gedrückt ist und alle änderungen, die Sie brauchen, um zu haben, länger brauchen, um mit javascript gemacht werden.
Wie wäre es mit einer reinen CSS-Lösung, ohne (dass) hacky?
CSS:
HTML:
@TylerH hat eine tolle Reaktion, sondern eine sehr komplexe Lösung. Ich habe eine Lösung für diejenigen von Ihnen, die wollen einfach nur ein einfaches "onclick" - Effekt mit reinem css, ohne eine Reihe von zusätzlichen Elementen.
Werden wir einfach die css-übergänge. Könnte Sie wahrscheinlich ähnlich wie mit Animationen.
Der trick ist das ändern der Verzögerung für den übergang, so dass es dauern wird, wenn der Benutzer klickt.
Hier füge ich das "clicked" - Klasse auch so, dass javascript kann auch der Effekt, wenn man es braucht. Ich benutze 0px drop-shadow-filter, denn es hebt die transparent graphic blau dieser Weg für meinen Fall.
Ich habe einen filter bei 0s hier so, dass es nicht wirksam. Wenn die Wirkung freigesetzt wird, kann ich mich dann fügen Sie die transition mit einer Verzögerung, so dass es bietet eine schöne "geklickt" - Effekt.
Dies ermöglicht es mir, es so einrichten, dass, wenn der Benutzer auf die Schaltfläche klickt, unterstreicht er blau, dann langsam ausgeblendet (man könnte natürlich, verwenden Sie andere Effekte auch).
Während Sie sind hier begrenzt in dem Sinne, dass die animation zu markieren, ist instant, ist es immer noch die gewünschte Wirkung. Sie könnte wahrscheinlich verwenden Sie diesen trick mit der animation, um einen glatteren Allgemeinen übergang.
Bojangles Antwort ist in der Regel richtig, jedoch:
"Der einzige Weg, um einen Stil und halten Sie es angewendet onclick ist ein Stück JavaScript"
Dies ist nicht ganz wahr, im Sinne der Beibehaltung der block sichtbar nach dem Klick. Ich hatte eine ähnliche situation, ich brauchte ein popup-div mit " onClick, wo ich konnte nicht fügen Sie alle JS oder ändern Sie die markup/HTML (eine wirklich CSS-Lösung) und dies ist möglich mit einigen Einschränkungen. Sie können nicht verwenden :Ziel-trick erstellen kann, ein nettes popup, es sei denn, Sie ändern die HTML - (, fügen Sie ein 'id'), so dass heraus war.
In meinem Fall das popup-div war, enthielt in den anderen div, und ich wollte das popup-Fenster über dem anderen div, und dies kann durchgeführt werden unter Verwendung einer Kombination von :active und :hover:
Beispiel (sowie eine, ermöglicht ein Klick auf das popup, um es verschwinden) an:
http://davesource.com/Solutions/20150324.CSS-Only-Click-to-Popup-Div/
Habe ich den untenstehenden code für Mauszeiger und Mausklick-und es funktioniert:
und diesem code verbirgt sich das Bild, wenn Sie darauf klicken:
Hatte ich ein problem mit einem element, das musste sein, ROT gefärbt auf schweben und werden BLAU auf klicken Sie auf, während Sie schwebten. Um dies zu erreichen mit css müssen Sie zum Beispiel:
Kämpfte ich für einige Zeit, bis ich entdeckte, dass die um von CSS-Selektoren war das problem ich hatte. Das problem war, dass ich wechselte die Plätze und die aktive Auswahl war nicht arbeiten. Dann fand ich heraus, dass
:hover
zu gehen und erst dann:active
.können Sie nutzen :Ziel
für Allgemeines Ziel
oder filter, die durch die Klasse name
filtern oder durch id-Namen
:target
ist bereits gebucht, so dass keine Notwendigkeit für eine weitere. Außerdem ist der Fragesteller Fragen, wie ein "onclick" - Effekt, nicht - /ausblenden der anderen Elemente.