单独使用 css 增加 div 尺寸

Question

我想在单击时增加 div 的宽度。我想单独使用 CSS 来实现这一点。可能吗？我通过悬停使它的宽度增加，但我需要在单击 div 时发生相同的效果。欢迎提出建议。

HTML

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

CSS

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

我想在点击时将宽度更改为 200px。

Answer 1

一个可能的解决方案是向 div 添加一个 tabindex 属性，如下所示：

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

现在，您可以在 CSS:

中使用 :focus

#sample:focus {
   width: 200px;
}

Here's a jsFiddle 实际展示。

不幸的是，当div模糊时，宽度会变回去。 更新：查看以获取保留焦点效果的巧妙解决方案。

如果您需要在 div 模糊后保留宽度，您可能不得不冒险进入 JavaScript/jQuery，或者只添加一个 onclick 属性。

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

Answer 2

这无法用 CSS 完成，您需要写几行 JavaScript 来存档。

如果你改变主意在这里写一些 JS 只是一种解决方案：

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

如果您想在点击时切换大小，您可以将 div 放在 label 中，放在不可见的 input:

之后

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 4

根据 Quantastical 接受的答案，如果您希望在 div 失去焦点后高度保持在新的大小，您可以通过一些涉及过渡的技巧来实现，而不需要 JavaScript.

正如 Quantastical 所说，首先给你的 div 一个 tabindex。

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

请注意，如果值为 0，则在使用键盘上的选项卡按钮遍历页面时，它将成为第一个获得焦点的项目，因此您可能需要增加该值，使其集中在正确的顺序。或者，如果您不希望通过 Tab 键将焦点转移到 div 时发生更改，请将 tabindex 值设置为 -1。

则CSS如下：

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

诀窍是在没有焦点的 div 上设置一个 transition，延迟高得离谱，这样它就永远不会被执行。

单独使用 css 增加 div 尺寸

Increase a div size on click with css alone

css

resize

click