¿Puedo tener un efecto onclick en CSS?


335

Tengo un elemento de imagen que quiero cambiar al hacer clic.

<img id="btnLeft">

Esto funciona:

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

Pero lo que necesito es:

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

Pero, no funciona, obviamente. ¿Es posible tener onclickcomportamiento en CSS (es decir, sin usar JavaScript)?


77
:activefunciona mientras el mouse está abajo. Dependiendo de lo que intente hacer, es posible que pueda hacerlo funcionar utilizando la pseudoclase CSS4 :target.
bfavaretto

2
:targetno es nuevo para Selectores 4. Ha estado disponible desde Selectores 3, que ya era una recomendación durante un año en el momento de la redacción.
BoltClock

Respuestas:


314

Lo más cercano que obtendrás es :active:

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

Sin embargo, esto solo aplicará el estilo cuando se mantenga presionado el botón del mouse. La única forma de aplicar un estilo y mantenerlo aplicado al hacer clic es usar un poco de JavaScript.


@ Sparky672, prácticamente todo: caniuse.com/#feat=css-sel2 (IE7 admite: activo también, pero no está en la lista porque no admite algunos de los otros selectores)
jrajav


13
Esta respuesta está desactualizada. Vea la respuesta de TylerH para una solución solo de CSS para esto.
Maximillian Laumeister

Hay una solución CSS más sencilla que el hack de casilla de verificación de TylerH.
David Ljung Madison Stellar

348

Respuesta a partir de 2019:

La mejor manera (en realidad, la única forma *) de simular un evento de clic real usando solo CSS (en lugar de simplemente pasar el cursor sobre un elemento o activar un elemento, donde no tiene mouseUp ) es usar el hack de la casilla de verificación. Funciona adjuntando labela un <input type="checkbox">elemento a través del for=""atributo de la etiqueta .

Esta característica tiene un amplio soporte de navegador (la :checkedpseudoclase es IE9 +).

Aplicar el mismo valor a un <input>atributo 's ID y un acompañamiento <label>' s for=""atributo, y se puede decir que el navegador re-estilo de la etiqueta de clic en la :checkedpseudo-clase, gracias al hecho de que al hacer clic una etiqueta comprobará y desactive la "asociado" <input type="checkbox">.

* Se puede simular un evento "seleccionado" a través de la :activeo :focuspseudo-clase en IE7 + (por ejemplo, para un botón que normalmente es 50pxamplia, puede cambiar su anchura, mientras que active: #btnControl:active { width: 75px; }), pero los que no son verdad "clic" eventos. Están "en vivo" todo el tiempo que se selecciona el elemento (por ejemplo, haciendo Tabbing con su teclado), que es un poco diferente de un evento de clic verdadero, que activa una acción, generalmente mouseUp.


Demostración básica del truco de la casilla de verificación (la estructura básica del código para lo que está pidiendo):

Aquí he colocado la etiqueta justo después de la entrada en mi marcado. Esto es para que pueda usar el selector de hermanos adyacentes (la +tecla) para seleccionar solo la etiqueta que sigue inmediatamente a mi #democasilla de verificación. Dado que la :checkedpseudoclase se aplica a la casilla de verificación, #demo:checked + labelsolo se aplicará cuando la casilla de verificación esté marcada.

Demostración para cambiar el tamaño de una imagen al hacer clic, que es lo que está preguntando:

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

Con eso se dice, no es una mala noticia. Debido a que una etiqueta solo puede asociarse con un control de formulario a la vez , eso significa que no puede soltar un botón dentro de las <label></label>etiquetas y llamarlo por día. Sin embargo, nosotros podemos usar un poco de CSS para hacer la mirada etiqueta y se comportan bastante cerca de cómo un botón HTML parece y se comporta.

Demostración para imitar un efecto de clic de botón, más allá de lo que está pidiendo:

La mayor parte del CSS en esta demostración es solo para diseñar el elemento de etiqueta. Si realmente no necesita un botón , y cualquier elemento antiguo será suficiente, puede eliminar casi todos los estilos en esta demostración, similar a mi segunda demostración anterior.

También se dará cuenta que tengo una propiedad fija allí, -moz-outline-radius. Hace un tiempo, Mozilla agregó esta increíble propiedad no especificada a Firefox, pero la gente de WebKit decidió que , por desgracia, no la agregarán . Considere que la línea de CSS es solo una mejora progresiva para las personas que usan Firefox.


2
¡Increíble! Pero, ¿hay alguna manera de revertir los cambios también al hacer clic en otro lugar que no sea el botón de entrada / imagen /? Usé su ejemplo para crear un campo emergente y quiero que desaparezca cuando los visitantes hagan clic en la página en blanco. ¡Gracias!
mxmehl

1
@mxmehl Si desea que hagan clic en un lugar específico, probablemente podría hacerlo con otro elemento hermano adyacente. Sin embargo, si desea que se revierta simplemente haciendo clic en cualquier lugar de la pantalla que esté en blanco, es probable que necesite oyentes de eventos de JavaScript. Recuerde, este es un truco y no es la "mejor" forma de crear una experiencia "interactiva"; eso es lo que JS es para . Esto es solo cómo hacerlo si está restringido a usar solo CSS. :-)
TylerH

55
Esta solución sigue siendo agradable, pero cuando leí "respuesta 2017" esperaba algo realmente genial (como una característica CSS3 que finalmente obtuvo un amplio soporte para el navegador), no el gran truco de casilla de verificación que ha existido desde 2011 ... Algo decepcionado .
Christallkeks

3
@Christallkeks Si CSS agrega algo (probablemente no lo hará; la interactividad está más allá del alcance del propósito de CSS), actualizaré la respuesta para incluirla. Tal como están las cosas, el título de "respuesta de 2017" es informar a las personas que esta respuesta es la más actualizada, por lo que de un vistazo no verán el hecho de que la respuesta se publicó en 2015 y dicen "oh , Me pregunto si ya existe una nueva función ".
TylerH

1
@ Muhammad Saqib Sí, debería funcionar en cualquier navegador móvil que sea compatible :checked.
TylerH

78

Puede usar la pseudo clase :targetpara imitar un evento de clic, déjeme darle un ejemplo.

#something {
  display: none;
}

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

Así es como se ve: http://jsfiddle.net/TYhnb/

Una cosa a tener en cuenta, esto solo se limita al hipervínculo, por lo que si necesita usar otro que no sea el hipervínculo, como un botón, es posible que desee piratearlo un poco, como diseñar un hipervínculo para que parezca un botón.


8
¿Cómo revertimos la acción?
Ansyori

Pensé que no podías apuntar a algo que no se mostraba.
Hazior

38

Si le das al elemento a, tabindexentonces puedes usar la :focuspseudo clase para simular un clic.

HTML

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

CSS

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

http://jsfiddle.net/NaTj5/


2
¡Esto funciona razonablemente bien! cuando usa tabindex=-1el elemento todavía se puede enfocar, pero solo con el mouse, no con el teclado, lo que es mejor en este caso. también puede usar un outline:0estilo para eliminar el borde azul cuando está enfocado
Stefan Paul Noack

35

Editar: Respondió antes de que OP aclarara lo que quería. Lo siguiente es para un onclick similar a javascripts onclick, no la :activepseudo clase.

Esto solo se puede lograr con Javascript o Checkbox Hack

El truco de la casilla de verificación esencialmente hace que haga clic en una etiqueta, que "marca" una casilla de verificación, lo que le permite diseñar la etiqueta como desee.

La demo


1
También puede incluir su entrada dentro de la etiqueta para que no tenga que usar idatributos para unirlos.
2014

12

TylerH hizo una muy buena respuesta, y solo tuve que actualizar esa última versión del botón.

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


Niza: estilos activos; lo que estaba buscando, pero estaba un poco apresurado al desarrollar su aspecto.
TylerH

9

¿Qué tal una solución CSS pura sin ser (que) hacky?

ingrese la descripción de la imagen aquí

.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 tiene una gran respuesta pero es una solución bastante compleja. Tengo una solución para aquellos de ustedes que solo quieren un simple efecto "onclick" con CSS puro sin un montón de elementos adicionales.

Simplemente usaremos transiciones CSS. Probablemente podrías hacer algo similar con las animaciones.

El truco consiste en cambiar el retraso de la transición para que dure cuando el usuario hace clic.

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

Aquí agrego también la clase "clics" para que JavaScript también pueda proporcionar el efecto si es necesario. Uso el filtro de sombra paralela 0px porque resaltará el gráfico azul transparente dado de esta manera para mi caso.

Tengo un filtro a 0s aquí para que no surta efecto. Cuando se libera el efecto, puedo agregar la transición con un retraso para que proporcione un buen efecto de "clic".

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

Esto me permite configurarlo para que cuando el usuario haga clic en el botón, se resalte en azul y luego se desvanezca lentamente (por supuesto, también podría usar otros efectos).

Si bien está limitado aquí en el sentido de que la animación para resaltar es instantánea, aún proporciona el efecto deseado. Probablemente podría usar este truco con animación para producir una transición general más suave.

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí


FWIW la complejidad es lo que se necesita para instituir un efecto de clic persistente . Si solo quiere hacer algo temporalmente que no conserve su estado, esta o muchas otras soluciones están bien y definitivamente estoy de acuerdo en que es menos complejo.
TylerH

Convenido. Todo en lo que necesita que sea el resultado final y siempre es bueno saber todas las opciones. Este es un gran hilo para aquellos con seguridad. ¡Probablemente valga la pena leer un artículo medio completo sobre cada uno y los beneficios de cada uno!
Braden Rockwell Napier

8

De acuerdo, esta quizás sea una publicación antigua ... pero fue el primer resultado en Google y decidió hacer su propia mezcla sobre esto como ...

PRIMERO UTILIZARÉ FOCUS

La razón de esto es que funciona bien para el ejemplo que estoy mostrando, si alguien quiere un evento de tipo mouse down, use active

EL CÓDIGO HTML:

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

EL CÓDIGO 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/

Entonces, ¿por qué estoy publicando esto en un hilo antiguo? Bueno, porque los ejemplos aquí varían y pensé en devolver uno a la comunidad, que es un ejemplo de trabajo.

Como ya respondió el creador del hilo, solo quieren que el efecto dure durante el evento de clic. Ahora, si bien esto no es exacto para esa necesidad, está cerca. active se animará mientras el mouse esté presionado y cualquier cambio que necesite que dure más tiempo debe hacerse con javascript.


1
Para cualquiera que esté leyendo, de todos modos para que sea alternar? ¿O es eso pedir demasiado de css lol?
DardanM

Hasta donde yo sé, el enfoque / activo / desplazamiento está lo más cerca posible de css ... Es posible que pueda hacer algo elegante con una opción / seleccione el tipo de código ... Pero aún no lo he intentado / necesitado
Enojado 84

7

¡Advertencia! Particularmente simple respuesta a continuación! :)

En realidad, puede tener un cambio que persiste (como un bloque / ventana emergente que aparece y permanece visible después de un clic) con solo CSS (y sin usar el hack de la casilla de verificación) a pesar de lo que muchas de las respuestas (de lo contrario correctas) aquí reclaman, siempre ya que solo necesitas persistencia durante el vuelo estacionario.

Así que eche un vistazo a las respuestas de Bojangles y TylerH si funcionan para usted, pero si desea una respuesta simple y CSS que mantendrá un bloque visible después de hacer clic (e incluso puede hacer que el bloque desaparezca con un clic de seguimiento), luego Mira esta solución.

Tuve una situación similar, necesitaba un div emergente con onClick donde no podía agregar ningún JS o cambiar el marcado / HTML (una verdadera solución CSS) y esto es posible con algunas advertencias. No puede usar el truco: target que puede crear una buena ventana emergente a menos que pueda cambiar el HTML (para agregar un 'id') para que quede fuera.

En mi caso, el div emergente estaba contenido dentro del otro div, y quería que apareciera encima del otro div, y esto se puede hacer usando una combinación de: active y: 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;
}

Ejemplo (así como uno que permite hacer clic en la ventana emergente para hacerla desaparecer) en:

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

También he insertado un ejemplo de fragmento de código a continuación, pero el posicionamiento en el entorno limitado de stackoverflow es extraño, así que tuve que poner el texto 'haga clic aquí' después del innerDiv, que normalmente no es necesario.

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


1
(re: nuestra discusión de comentarios anterior) La información div no permanece visible más allá de mouseUp en Firefox. Si bien permanece visible más allá del mouseUp en otros navegadores (IE, Edge, Chrome), no persiste cuando el mouse se mueve fuera de la caja en cualquier otro navegador, evitando así que se considere un verdadero evento 'onclick' ( por ejemplo, un cambio persistente).
TylerH

2

Tengo el siguiente código para pasar el mouse y hacer clic con el mouse y funciona:

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

y este código oculta la imagen cuando haces clic en ella:

.thumbnail:active span {
    visibility: hidden;
}

2

Tuve un problema con un elemento que tenía que ser de color ROJO al pasar el mouse y ser AZUL al hacer clic mientras se pasa el cursor. Para lograr esto con css necesita, por ejemplo:

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

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

Luché por un tiempo hasta que descubrí que el orden de los selectores de CSS era el problema que tenía. El problema fue que cambié los lugares y el selector activo no funcionaba. Entonces descubrí que :hoverir primero y luego :active.


-3

puedes usar: target

para objetivo general

:objetivo

o filtrar por nombre de clase

.classname: target

o filtrar por nombre de identificación

#idname: target

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

2
:targetYa se ha publicado una respuesta que muestra cómo usar , por lo que no necesita una más. Además, el interlocutor pregunta cómo tener un efecto "onclick", no mostrar / ocultar otros elementos.
Ason

Esto también es más un efecto de "carga" que de "onclick".
TylerH
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.