css - 仅使用 css 增加点击时的 div 大小

Question

我想在单击 div 时增加它的宽度。我想单独使用 CSS 来实现这一点。是否可以？我通过悬停使它的宽度增加，但我需要在单击 div 时发生相同的效果。不胜感激。

HTML

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

CSS

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

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

Answer 1

一个可能的解决方案是添加一个 tabindex属性为 div ，像这样:

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

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

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