Puis-je avoir un effet onclick dans CSS?

J’ai un élément d’image que je veux changer en cliquant.

Mais ça ne marche pas, évidemment. Est-il possible d’avoir un comportement onclick en CSS (c’est-à-dire sans utiliser JavaScript)?

Le plus proche de vous est :active :

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

Cependant, cela n’appliquera le style que lorsque le bouton de la souris est maintenu enfoncé. La seule façon d’appliquer un style et de le maintenir appliqué est d’utiliser un peu de JavaScript.

2018 Réponse:

Le meilleur moyen (en fait la seule méthode *) pour simuler un événement de clic réel en utilisant uniquement CSS (plutôt que de se contenter de survoler un élément ou de rendre un élément actif, sans mouseUp ) consiste à utiliser le hack de case à cocher. Cela fonctionne en attachant une label à un élément via l’atsortingbut for="" du label.

Cette fonctionnalité prend largement en charge le navigateur (la pseudo-classe :checked est IE9 +).

Appliquez la même valeur à l’atsortingbut d’ID de et à l’atsortingbut associé for="" , et vous pouvez demander au navigateur de reformater l’étiquette en cliquant avec la pseudo-classe :checked merci le fait de cliquer sur une étiquette permet de vérifier et de décocher la case “associée” .

* Vous pouvez simuler un événement “sélectionné” via la pseudo-classe :active ou :focus dans IE7 + (par exemple, pour un bouton qui a normalement 50px largeur de 50px , vous pouvez changer sa largeur lorsqu’il est active : #btnControl:active { width: 75px; } ) , mais ce ne sont pas de vrais “click” événements. Ils sont “live” pendant toute la durée de la sélection de l’élément (par exemple par tabulation avec votre clavier), ce qui est un peu différent d’un événement de clic, qui déclenche une action sur – typiquement – mouseUp .


Démo de base du hack checkbox (la structure de code de base pour ce que vous demandez):

 label { display: block; background: lightgrey; width: 100px; height: 100px; } #demo:checked + label { background: blue; color: white; } 
   

Vous pouvez utiliser une pseudo-classe :target pour imiter un événement click, laissez-moi vous donner un exemple.

 #something { display: none; } #something:target { display: block; } 
 Show 
Bingo!

Si vous atsortingbuez un tabindex l’élément, vous pouvez utiliser la pseudo-classe :focus pour simuler un clic.

HTML

  

CSS

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

http://jsfiddle.net/NaTj5/

Edit: Répondu avant que OP ait clarifié ce qu’il voulait. Ce qui suit concerne un onclick similaire à javascripts onclick, pas la pseudo-classe :active .

Cela ne peut être réalisé qu’avec Javascript ou Checkbox Hack

Le hack de la case à cocher vous amène essentiellement à cliquer sur une étiquette, qui “coche” une case à cocher, vous permettant de personnaliser l’étiquette comme vous le souhaitez.

La démo

TylerH a fait une très bonne réponse, et je devais simplement mettre à jour cette dernière version du bouton.

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

Ok, c’est peut-être un vieux post … mais a été le premier résultat dans google et a décidé de faire votre propre mix à ce sujet ..

D’abord je vais utiliser FOCUS

La raison en est que cela fonctionne très bien pour l’exemple que je montre, si quelqu’un veut un événement de type souris, puis utiliser

LE CODE HTML:

     

LE CODE CSS:

 /* 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/

Alors, pourquoi est-ce que je publie ceci dans un vieux sujet, parce que les exemples ici varient et que je pensais fournir un exemple à la communauté.

Comme déjà répondu par le créateur de threads, ils veulent seulement que l’effet dure pendant l’événement click. Maintenant que ce n’est pas exact pour ce besoin, c’est proche. active s’animera lorsque la souris sera éteinte et toute modification nécessaire devra être effectuée avec JavaScript.

Bojangles la réponse est généralement correcte, cependant:

“Le seul moyen d’appliquer un style et de le maintenir appliqué est d’utiliser un peu de JavaScript”

Ce n’est pas tout à fait vrai dans le sens de garder le bloc visible après le clic. J’ai eu une situation similaire, j’avais besoin d’un div popup avec onClick où je ne pouvais pas append de JS ou changer le balisage / HTML (une véritable solution CSS) et cela est possible avec quelques réserves. Vous ne pouvez pas utiliser le truc: target qui peut créer une fenêtre contextuelle agréable à moins que vous ne puissiez changer le code HTML (pour append un «ID»).

Dans mon cas, le div popup était contenu dans l’autre div, et je voulais que la popup apparaisse au-dessus de l’autre div, et cela peut être fait en utilisant une combinaison de: active et: hover:

 /* 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; } 

Exemple (ainsi que celui permettant de cliquer sur le popup pour le faire disparaître) à:

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

entrer la description de l'image ici

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

J’ai le code ci-dessous pour le survol de la souris et le clic de la souris et ça marche:

 //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%; } 

et ce code cache l’image lorsque vous cliquez dessus:

 .thumbnail:active span { visibility: hidden; } 

J’ai eu un problème avec un élément qui devait être de couleur ROUGE en vol stationnaire et être BLEU en cliquant tout en étant en vol stationnaire. Pour ce faire avec css vous avez besoin par exemple:

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

This is a heading.

J’ai lutté pendant un certain temps jusqu’à ce que je découvre que l’ ordre des sélecteurs CSS était le problème que je rencontrais. Le problème était que je changeais de place et que le sélecteur actif ne fonctionnait pas. Ensuite, j’ai découvert que :hover pour aller en premier et ensuite :active .