para - mostrar texto hover css

Aumenta un tamaño de div al hacer clic con css solo

Question

Quiero aumentar el ancho de mi div cuando hago clic en él. Quiero lograr esto solo con CSS. ¿Es posible? Lo hice aumentar de ancho mediante el vuelo estacionario, pero necesito que suceda el mismo efecto cuando hago clic en el div. Las sugerencias son apreciadas.

HTML

<div id="sample"></div>

CSS

#sample{
  width:100px;
  height:100px;
  background:#000000;
}

Quiero cambiar el ancho a 200px al hacer clic.

Answer 1

Esto no se puede hacer con CSS, necesita escribir un par de líneas de JavaScript para archivar esto.

Si cambias de opinión para escribir algunos JS, aquí hay solo una solución:

<script> // Creating a script tag to write JS
var sampleDiv = document.getElementById(''sample''); // Grabbing the sample  id

sampleDiv.addEventListener(''click'', function(e) { // When someone clicks on it
  sampleDiv.style.width = "200px"; // The width increases to 200px
};
</script>

Answer 2

Si desea alternar el tamaño al hacer clic, puede colocar el div dentro de una label después de una input invisible:

label {
  display: inline-block;
}

label input {
  display: none;
}

input:checked ~ #sample {
  width: 150px;
  height: 150px;
}

#sample {
  width: 100px;
  height: 100px;
  background: #000000;
}

<label>
  <input type="checkbox">
  <div id="sample"></div>
</label>

Answer 3

Siguiendo con la respuesta aceptada de Quantastical, si quieres que la altura se mantenga en el nuevo tamaño después de que el div pierda el foco, puedes hacerlo con un poco de engaño que involucra transiciones sin necesidad de JavaScript.

Como dijo Quantastical, primero dale a tu div un tabindex .

<div id="sample" tabindex="0"></div>

Tenga en cuenta que con un valor de 0 , se convertirá en el primer elemento enfocado al recorrer la página con el botón de tabulación de su teclado, por lo que es posible que desee aumentar el valor para enfocarlo en el orden correcto. Alternativamente, si no desea que se produzca el cambio cuando el foco se desplaza a div mediante tabulación, establezca el valor de tabindex en -1 .

El CSS es el siguiente:

#sample{
    background:#000;
    height:100px;
    transition:height 0s 10000s;
}
#sample:focus{
    height:200px;
    outline:0;
    transition:height 0s;
}

El truco consiste en establecer una transition en el div desenfocado con una demora ridículamente alta para que nunca se ejecute.

Crédito

Answer 4

Una solución potencial sería agregar un atributo tabindex a div , de esta forma:

<div id="sample" tabindex="0"></div>

Ahora puede usar :focus su CSS:

#sample:focus {
   width: 200px;
}

Aquí hay un jsFiddle para mostrarlo en acción.

Desafortunadamente, cuando el div es borroso, el ancho retrocederá. Actualización: echa un vistazo a Shaggy''s Answer para una solución inteligente para retener el efecto de foco.

Si necesita que el ancho permanezca después de que el div esté borroso, es probable que tenga que aventurarse en JavaScript / jQuery, o simplemente agregar un atributo onclick .

<div id="sample" onclick="this.style.width = ''200px'';"></div>