Question

我想点击它时增加div的宽度。我想用CSS单独实现这一目标。可能吗？我通过悬停增加了宽度，但是当我点击div时我需要同样的效果。建议表示赞赏。

HTML

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

CSS

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

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

Answer 1

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

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

现在，您可以在CSS中使用:focus：

#sample:focus {
   width: 200px;
}

Here's a jsFiddle展示它的实际效果。

不幸的是，当div模糊时，宽度会回来。 更新：查看Shaggy's Answer以获得保留焦点效果的巧妙解决方案。

如果您需要在div模糊后保持宽度，则可能需要冒险使用JavaScript / jQuery，或者只添加onclick属性。

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

Answer 2

继Quantastical公司接受的答案之后，如果你希望在div失去焦点后高度保持在新的大小，你可以通过一些涉及过渡的技巧来完成它而不需要的JavaScript。

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

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

请注意，值为0的情况下，当您使用键盘上的标签按钮遍历页面时，它将成为第一个关注项目，因此您可能希望增加该值以便将其重点关注按正确的顺序。或者，如果您不希望在焦点转移到div至标签的情况下进行更改，请将tabindex值设置为-1。

CSS如下：

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

诀窍是在未聚焦的transition上设置一个div，延迟时间非常高，以免永远执行。

Credit

Answer 3

如果您想在点击时切换尺寸，可以在隐身div之后将label放在input内：

＆＃13;

label {
  display: inline-block;
}

label input {
  display: none;
}

input:checked ~ #sample {
  width: 150px;
  height: 150px;
}

#sample {
  width: 100px;
  height: 100px;
  background: #000000;
}

＆＃13;

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

＆＃13;

Answer 4

这不能用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>

单击css单击增加div大小

4 个答案: