Tengo un elemento de la imagen que quiero cambiar en haga clic en.

<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 onclick comportamiento en CSS (es decir, sin el uso de JavaScript)?

  • :active obras, mientras que el ratón está abajo. Dependiendo de lo que usted está tratando de hacer, usted puede ser capaz de hacer que funcione el uso de la CSS4 pseudo-clase :target.
  • :target no es nuevo para los Selectores de 4. Ha estado disponible desde los Selectores de 3, que ya era una recomendación de un año en el momento de la escritura.
InformationsquelleAutor Alegro | 2012-11-29

12 Comentarios

  1. 276

    El más cercano que llegaremos es :activo:

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

    Sin embargo esto sólo se aplicará el estilo cuando el botón del ratón pulsado. La única manera de aplicar un estilo y mantener a los que se aplica onclick es el uso de un poco de JavaScript.

  2. 309

    Respuesta de 2019:

    La mejor manera (en realidad la única manera*) para simular un real haga clic en evento utilizando sólo CSS (en lugar de simplemente flotando en un elemento o en la fabricación de un elemento activo, en el que no tiene mouseUp) es el uso de la casilla de verificación hack. Funciona mediante la fijación de un etiqueta a un <input type="checkbox"> elemento a través de la etiqueta de la for="" atributo.

    Esta característica ha amplia compatibilidad del navegador (el :checked pseudo-clase es IE9+).

    Aplicar el mismo valor a un <input>‘s ID de atributo y un acompañante <label>‘s for="" atributo, y usted puede decirle al navegador para volver al estilo de la etiqueta, haga clic con el :checked pseudo-clase, gracias al hecho de que al hacer clic en una etiqueta de verificación y desactivar la casilla «asociados» <input type="checkbox">.

    * Se puede simular un «seleccionado» evento a través de la :active o :focus pseudo-clase en IE7+ (por ejemplo, un botón que normalmente 50px de ancho, puede cambiar su anchura, mientras que active: #btnControl:active { width: 75px; }), pero los que no son verdad «, haga clic en» eventos». Ellos son «en vivo» todo el tiempo que el elemento está seleccionado (por ejemplo, Fichabing con su teclado), que es un poco diferente a partir de un cierto evento click, que desencadena una acción en – normalmente – mouseUp.


    Básico de demostración de la casilla de verificación hack (el código básico de la estructura por lo que se están preguntando):

    CSS:

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

    HTML:

    <input type="checkbox" id="demo"/>
    <label for="demo">I'm a square. Click me.</label>

    Aquí he colocado la etiqueta de la derecha después de la entrada en mi marcado. Esto es lo que puedo usar el selector de hermanos adyacentes (el + clave) para seleccionar sólo la etiqueta que sigue inmediatamente a mi #demo casilla de verificación. Desde el :checked pseudo-clase se aplica a la casilla de verificación, #demo:checked + label sólo se aplicará cuando la casilla de verificación está activada.

    Demo para cambiar el tamaño de una imagen al hacer clic, que es lo que estamos pidiendo:

    CSS:

    #btnControl {
        display: none;
    }
    
    #btnControl:checked + label > img {
        width: 70px;
        height: 74px;
    }

    HTML:

    <input type="checkbox" id="btnControl"/>
    <label class="btn" for="btnControl"><img src="http://placekitten.com/200/140" id="btnLeft" /></label>

    Con lo que se dice, no es algunas malas noticias. Porque una etiqueta sólo puede ser asociado con una forma de control en un tiempo, que significa que no se puede soltar un botón dentro de la <label></label> etiquetas y lo llaman un día. Sin embargo, nos puede el uso de un poco de CSS para hacer que la etiqueta se comportan bastante cerca de cómo un botón de HTML se ve y se comporta.

    Demo para imitar a un botón en efecto, por encima y más allá de lo que se están preguntando:

    CSS:

    #btnControl {
        display: none;
    }
    
    .btn {
        width: 60px;
        height: 20px;
        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:20px;
    }
    
    .btn:hover {
        background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
    }
    
    
    .btn:active {
        margin-left: 1px 1px 0;
        box-shadow: -1px -1px 1px #000;
        outline: 1px solid black;
        -moz-outline-radius: 5px;
        background-image: linear-gradient(to top, #f4f5f5, #dfdddd);
    }
    
    #btnControl:checked + label {
        width: 70px;
        height: 74px;
        line-height: 74px;
    }

    HTML:

    <input type="checkbox" id="btnControl"/>
    <label class="btn" for="btnControl">Click me!</label>

    La mayoría de la CSS en esta demo es solo para el estilo de la etiqueta del elemento. Si usted realmente no necesita un botón, y de cualquier elemento será suficiente, entonces usted puede eliminar casi todos los estilos en esta demo, similar a la de mi segunda demo anterior.

    También te darás cuenta de que tengo un prefijo de propiedad allí, -moz-outline-radius. Hace un tiempo, Mozilla añadido este impresionante la no especificación de la propiedad para Firefox, pero la gente en WebKit decidió que no se va a agregar es, por desgracia. Así que considera que la línea de CSS sólo una mejora progresiva en las personas que usan Firefox.

    • Impresionante! Pero hay una manera de revertir los cambios también al hacer clic en algún lugar más que en la entrada/imagen/botón? He utilizado su ejemplo, para crear un emergente campo y yo quiero que desaparezca cuando los visitantes hacen clic en la página en blanco. Gracias!
    • Si usted quiere que se haga clic en un punto específico, que podría hacerlo con otro de hermanos adyacentes elemento, probablemente. Sin embargo, si usted lo desea volver con sólo hacer clic en cualquier lugar de la pantalla que está en blanco, usted está probablemente va a necesitar de eventos de JavaScript de los oyentes. Recuerde, este es un hack y no es la «mejor» manera de crear un «interactivo» de la experiencia, de que es lo que JS es para. Esto es sólo cómo se hace si usted está restringida al uso de CSS. 🙂
    • Sólo utilizar el CSS para escuchar HTML cuando se hace clic en y, a continuación, restablecer todo. Que debería funcionar.
    • Esta solución sigue siendo buena, pero cuando leí «el 2017 respuesta» me esperaba algo realmente cool (como un CSS3 característica que finalmente obtuvieron una amplia compatibilidad del navegador), no es la gran y antigua casilla de verificación hack que ha sido de alrededor desde 2011… un Poco decepcionado.
    • Si la CSS añade algo (probablemente no; la interactividad está más allá del alcance de CSS propósito), voy a actualizar la respuesta a incluir. Tal como está, el «2017 respuesta» el título es para que la gente sepa que esta respuesta es la más actualizada de uno, así que en una mirada que no mira el hecho de que la respuesta fue publicado en el año 2015 e ir «oh, me pregunto si una nueva característica existe todavía».
    • El ‘quite’ se podría hacer con el uso de la radio-botones y pantalla completa de la etiqueta invsible etiqueta de «quite»: Ver codepen.io/HerrSerker/pen/qKdwOr
    • Que funciona si desea que el comportamiento, aunque por lo general para los botones que cambian de clic que no desea, haga clic en no en el botón para anular la selección de una alternancia en el mismo elemento es generalmente deseada.
    • En este trabajo en móviles?
    • Sí, debería funcionar en cualquier navegador móvil que soporta :checked.
    • Yo no aconsejaría que una aplicación como esta para la accesibilidad razones. Supongo que se podría obtener alrededor de la mayoría de los problemas de accesibilidad con el uso de este aria aria pero debe ser un último recurso. Usted debería utilizar en su lugar los elementos HTML cuando su semántica ajuste el caso de uso.
    • Sí, que está implícito en la descripción de este método como un hack que no es recomendable si JavaScript está disponible.
    • Definitivamente no es el único camino :la meta es el camino más fácil de usar.
    • no simular un evento onclick, un enfoque evento. No se puede deshacer, por ejemplo.
    • ¿qué significa deshacer? Véase la respuesta de abajo para ver cómo hacerlo
    • Me refiero a deshacer, como en el restablecimiento o no a la inversa; el retorno a un estado anterior. Con :target, una vez que usted haga clic en el enlace para mostrar el div, usted no puede unshow el div; te estás atascado con ella. Si todo lo que quiero hacer es una sola vez, irreversible repintar, entonces seguro, :target funcionará, pero si quieres lo onclick le da a usted, que es un procesable evento que puede ir en ambos sentidos un número ilimitado de veces, no es suficiente.
    • no se puede hacer con el mismo enlace de curso, pero otro enlace con href="#" hará el truco. Y el enlace bueno puede ser que se muestra en función de lo que usted necesita: #showme:target ~ [href="#"] { display: block; } hará que el enlace que permite que usted oculte a aparecer, por ejemplo.
    • Suena como que usted tiene la base de su propia respuesta; que me animo a comentar. Esta respuesta muestra cómo hacer el completo onclick experiencia sin elementos adicionales, el enmascaramiento de los esfuerzos, etc. Pero el método que describen sería aún más complicado que esto. Y a pesar de todo, puedo pasar todo un párrafo en el salvedades a mi cita «la única forma» en la parte superior de la respuesta.

  3. 77

    Puede utilizar la pseudo clase :target para imitar el evento click, permítanme darles un ejemplo.

    CSS:

    #something {
      display: none;
    }
    
    #something:target {
      display: block;
    }

    HTML:

    <a href="#something">Show</a>
    <div id="something">Bingo!</div>

    Aquí es como parece: http://jsfiddle.net/TYhnb/

    Una cosa a tener en cuenta, este solo se limita a la hipervínculo, así que si usted necesita para su uso en otros de hipervínculo, como un botón, usted podría querer cortarlo un poco, como el estilo de un hipervínculo para que parezca un botón.

    • ¿Cómo podemos revertir la acción?
    • Pensé que no podía destino de algo que no se muestra.
  4. 36

    Si usted da el elemento de un tabindex a continuación, puede utilizar el :focus pseudo 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/

    • esto funciona razonablemente bien! cuando se utiliza tabindex=-1 el elemento todavía seleccionable, pero sólo por el ratón, el teclado no, que es mejor en este caso. también puede utilizar un outline:0 estilo para quitar el borde de color azul cuando está centrado
  5. 33

    Edición: Respondidas antes de OP aclaró lo que quería. El siguiente es un onclick similar a javascript onclick, no la :active pseudo clase.

    Esto sólo se puede conseguir con Javascript o el Casilla De Verificación Hack

    La casilla de verificación hack esencialmente hace clic en una etiqueta, que los «cheques» de una casilla de verificación, permitiendo que el estilo de la etiqueta como usted desea.

    La demo

    • por qué casilla de verificación hack ??? op nunca dijo que él está haciendo esto en la casilla de verificación hizo él?
    • También puede incluir su entrada en el interior de la etiqueta, de modo que usted no tiene que usar id atributos a los une.
  6. 12

    TylerH hizo una muy buena respuesta, y yo sólo tenía que dar ese último botón de la versión de actualización.

    CSS:

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

    HTML:

    <input type="checkbox" id="btnControl"/>
    <label class="btn" for="btnControl">Click me!</label>

    • Niza :activo estilos; lo que me estaba pasando, pero estaba un poco apurado cuando la construcción de la mirada de ellos.
  7. 8

    Acerca de cómo un puro CSS solución sin ser (que) chapucero?

    ¿Puedo tener un onclick efecto en CSS?

    CSS:

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

    HTML:

    <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 un bonito complejo de solución. Yo tengo una solución para aquellos que sólo quieren un simple «onclick» efecto con css sin un montón de elementos extra.

    Simplemente tendremos que utilizar las transiciones de la css. Usted probablemente podría hacer algo similar con las animaciones.

    El truco es cambiar el retraso de la transición, de manera que cuando el usuario hace clic.

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

    Aquí añado el «clic» de la clase, de tal forma que javascript puede también proporcionar el efecto si es necesario. Yo uso 0px caída de filtro de sombra porque va a resaltar el dado gráfico transparente azul de esta manera para mi caso.

    Tengo un filtro en 0s aquí para que no surta efecto. Cuando el efecto se libera puedo, a continuación, agregar la transición con un retraso de modo que proporcionan una agradable «clic» efecto.

    .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 hace clic en el botón, se pone de manifiesto azul, a continuación, se desvanece lentamente (usted podría, por supuesto, el uso de otros efectos).

    Mientras que usted está limitado en el sentido de que la animación a destacar es instantáneo, aún así proporcionar el efecto deseado. Usted podría utilizar este truco con animación para producir una suave transición general.

    ¿Puedo tener un onclick efecto en CSS?

    ¿Puedo tener un onclick efecto en CSS?

    • Por lo que vale la complejidad es lo que es necesario instituir un persistente haga clic en el efecto. Si usted sólo quiere hacer algo temporal que no conservará su estado, o de muchas otras soluciones están muy bien y estoy de acuerdo, definitivamente, menos complejo.
    • De acuerdo. Todo en lo que usted necesita que el resultado final sea y siempre es bueno conocer todas las opciones. Este es un gran hilo para aquellos seguro. Probablemente vale la pena todo el medio artículo va sobre cada uno y los beneficios de cada uno de ellos!
  8. 7

    Bueno, tal vez un viejo post… pero fue el primer resultado en google y decidió hacer su propia mezcla en esto como..

    EN PRIMER LUGAR, VOY A UTILIZAR EL ENFOQUE

    La razón de esto es que funciona muy bien para el ejemplo que voy a mostrar, si alguien quiere un ratón tipo de eventos, a continuación, utilizar activo

    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 VIOLÍN ENLACE: http://jsfiddle.net/00wwkjux/

    Así que ¿por qué estoy publicando esto en un hilo viejo, bien porque los ejemplos aquí variar y pensé para proporcionar una vuelta a la comunidad, que es un ejemplo de trabajo.

    Como ya se ha respondido por el hilo creador, que sólo quieren que dure el efecto durante el evento click. Ahora bien, aunque esto no es exacto que necesita, su cierre. activo se moverá mientras que el ratón está abajo y los cambios que usted necesita tener la última ya no tendrá que ser hecho con javascript.

    • Cualquiera que esté leyendo, de todos modos que hacer es alternar? O es que es pedir demasiado de css lol?
    • Hasta donde yo sé, el enfoque/activo/hover es casi tan cerca como usted puede conseguir con css.. Usted podría ser capaz de hacer algo de fantasía con una opción/seleccionar el tipo de código.. Pero no he probado necesario que aún
    • No funciona con Firefox Cuántica (v61)
  9. 4

    Bojangles respuesta es correcta en general, sin embargo:

    «La única manera de aplicar un estilo y mantenerlo aplicado onclick es el uso de un poco de JavaScript»

    Esto no es completamente cierto en el sentido de mantener el bloque visible después del clic. Tuve una situación similar, yo necesitaba un popup div onClick a los que no podía agregar cualquier JS o cambiar el marcado/HTML (una verdadera solución CSS) y esto es posible con algunas salvedades. Usted no puede utilizar el :destino truco que puede crear un bonito emergente a menos que usted puede cambiar el HTML (para agregar un ‘id’) por lo que estaba fuera.

    En mi caso el emergente div estaba contenida dentro de otro div, y yo quería que la emergente que aparezca en la parte superior de otro div, y esto se puede hacer utilizando una combinación de :activo 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 hacerlo desaparecer) en:

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

  10. 2

    Tengo el código de abajo para desplazar el puntero del mouse y clic de ratón 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 se esconde la imagen al hacer clic en ella:

    .thumbnail:active span {
        visibility: hidden;
    }
  11. 2

    Tuve un problema con un elemento que tenía que ser de color ROJO en hover y ser AZUL en haga clic mientras se cernía. Para lograr esto con css necesita por ejemplo:

    h1:hover { color: red; } 
    h1:active { color: blue; }
    
    <h1>This is a heading.</h1>

    Me costó algún tiempo hasta que descubrí que el fin de de los selectores de CSS era el problema que estaba teniendo. El problema fue que cambié los lugares y active el selector de que no estaba funcionando. Luego me enteré de que :hover para ir de la primera y, a continuación,:active.

  12. -3

    puede utilizar :destino

    para el objetivo general

    :destino

    o filtro por nombre de la clase

    .classname:destino

    o filtrar por el nombre de identificación de

    #idname:destino

    <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>
    • Una respuesta que muestra cómo utilizar :target ya está publicado, así que no hay necesidad de uno más. Además, el interrogador pedir para tener un «onclick» efecto, no mostrar/ocultar otros elementos.
    • Esto es más de un «onload» que «onclick» efecto, como bien.

Dejar respuesta

Please enter your comment!
Please enter your name here