web-dev-qa-db-fra.com

Puis-je avoir un effet onclick en CSS?

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

<img id="btnLeft">

Cela marche:

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

Mais ce dont j'ai besoin c'est:

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

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

csscss3onclick
296
Alegro

Le plus proche que vous obtiendrez est :active :

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

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

275
Bojangles

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

#something {
  display: none;
}

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

Voici à quoi cela ressemble: http://jsfiddle.net/TYhnb/

Une chose à noter, cela se limite au lien hypertexte, donc si vous devez utiliser un lien autre qu'un lien hypertexte, tel qu'un bouton, vous voudrez peut-être le modifier un peu, comme le style d'un lien hypertexte.

77
Hendra Uzia

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

HTML

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

CSS

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

http://jsfiddle.net/NaTj5/

36
Blake Plumb

Edit: Répondu avant que OP ne clarifie ce qu'il voulait. Ce qui suit est pour un onclick similaire à javascripts onclick, pas la pseudo-classe :active.

Ceci ne peut être réalisé qu'avec Javascript ou le Checkbox Hack

La case à cocher bidouille vous oblige essentiellement à cliquer sur une étiquette, qui "vérifie" une case à cocher, vous permettant de styliser l'étiquette à votre guise.

Le démo

33
Andy

TylerH a fait une très bonne réponse, et il me suffisait de mettre à jour cette version du dernier 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;
}
<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">Click me!</label>
12
LGSon

Ok, c'est peut-être un vieux post ... mais c'était le premier résultat dans google et j'ai décidé de faire votre propre mix là-dessus ...

EN PREMIER, J'UTILISERAI FOCUS

La raison en est que cela fonctionne bien pour l'exemple que je montre. Si quelqu'un veut un événement avec la souris, utilisez actif

LE CODE HTML:

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

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 poste ceci dans un vieux fil, bon parce que les exemples ici varient et j'ai pensé en fournir un à la communauté qui est un exemple concret.

Comme déjà répondu par le créateur du fil, ils ne veulent que l'effet dure pendant l'événement click. Maintenant, bien que ce ne soit pas exact pour ce besoin, il est proche. active s'animera tant que la souris sera enfoncée et tous les changements nécessaires dureront plus longtemps avec javascript.

7
Angry 84

Que diriez-vous d'une solution CSS pure sans être (ça) hacky?

enter image description here

.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 a une excellente réponse mais c'est une solution assez complexe. J'ai une solution pour ceux d'entre vous qui veulent juste un simple effet "onclick" avec du css pur sans beaucoup d'éléments supplémentaires.

Nous allons simplement utiliser les transitions CSS. Vous pourriez probablement faire la même chose avec des animations.

L'astuce consiste à modifier le délai de la transition afin qu'il dure lorsque l'utilisateur clique.

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

Ici, j’ajoute la classe "clicked" afin que javascript puisse aussi fournir l’effet s’il le faut. J'utilise un filtre ombre portée 0px car il mettra en évidence le bleu transparent indiqué de cette façon pour mon cas.

J'ai un filtre à 0 ici pour qu'il ne prenne pas effet. Lorsque l'effet est relâché, je peux ensuite ajouter la transition avec un délai afin qu'il fournisse un effet "cliqué" de Nice.

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

Cela me permet de le configurer de sorte que lorsque l’utilisateur clique sur le bouton, le bleu s’allume puis s’efface progressivement (vous pouvez bien sûr utiliser d’autres effets).

Bien que vous soyez limité ici dans le sens où l’animation à mettre en surbrillance est instantanée, elle fournit toujours l’effet souhaité. Vous pouvez probablement utiliser cette astuce avec une animation pour produire une transition globale plus douce.

enter image description here

enter image description here

7
Braden Rockwell Napier

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

"La seule façon d'appliquer un style et de le garder appliqué à onclick 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'une div popup avec onClick où je ne pouvais pas ajouter de JS ou changer le balisage/HTML (une solution vraiment CSS) et cela est possible avec certaines mises en garde. Vous ne pouvez pas utiliser l'astuce: target qui permet de créer une jolie popup à moins que vous ne puissiez modifier le code HTML (pour ajouter un "id").

Dans mon cas, le popup div était contenu dans l'autre div, et je voulais que le popup apparaisse au-dessus de l'autre div. Cette opération peut être réalisée à l'aide d'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 la popup pour la faire disparaître) à:

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

4
David Ljung Madison

J'ai le code ci-dessous pour le survol de la souris et le clic de souris et cela fonctionne:

//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;
}
2
Pir Fahim Shah

J'ai eu un problème avec un élément qui devait être coloré en rouge en survol et bleu au clic tout en étant survolé. Pour ce faire avec css, vous avez besoin par exemple:

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

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

J'ai lutté pendant un certain temps avant de découvrir que l'ordre des sélecteurs CSS était le problème que j'avais. Le problème était que j'ai changé de lieu et que le sélecteur actif ne fonctionnait pas. Ensuite, j'ai découvert que :hover pour commencer, puis :active.

2
Alreadytakenindeed