0

soy nuevo en esto y estoy tratando de escalar un div item con un click del ratón, utilizando solamente CSS, hasta ahora solo he logrado el efecto con :hover y con :active, pero quiero que el div item se escale (scale(3, 3)) y desescale (toggle) con un click.

He buscado en la web y aparecen varias sugerencias, la que mas se acerca a lo que busco es <input type="checkbox">, pero no se ajusta al contexto porque quiero que sea el div item completo.

Otra opción me sugiere considerar todo el div item como un type="button", esto lo estoy probando ahora mismo

Sé que CSS no controla todavía algunos eventos del mouse, pero estoy evitando JScript que aun es una asignatura pendiente

Si alguien pudiera ayudarme lo agradecería

Un saludo

1 respuesta 1

3

Como bien dices eso se hace con un checkbox, no hay otra forma con puro CSS, un div carece de algun evento activo/inactivo

No es complicado de hacer lo que pides, aunque pierdes la posibilidad de seleccionar el contenido dentro del div, si esto no cumple tus expectativas deberás voltear a ver un poco de javascript aunque no lo quieras.

input{ display:none }
div{ background: #fe0; position: relative;}
input:checked + div{ background: #f30;transform: scale(3, 3)}
div label{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer;}
<input type="checkbox" id="scale">
<div>
  <label for="scale"></label>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem fugiat esse suscipit, ipsa qui maiores temporibus ab, impedit numquam doloremque non quis ex omnis, incidunt voluptatibus labore alias molestias enim.
</div>

2
  • 2
    No soy FAN de hacer código 100% funcional acorde a lo que preguntan, me gusta mas la idea de dar un ejemplo al estilo de pistas, pero bueno, esto es algo pequeño supongo que no pierdo nada si le cambio un misero parámetro al ejemplo Commented el 18 jun. 2020 a las 18:56
  • Gracias a Arturo Gallegos, tu información ha sido muy valiosa y oportuna Commented el 19 jun. 2020 a las 0:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.