单击css单击增加div大小

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>

现在,您可以:focus在CSS中使用:

#sample:focus {
   width: 200px;
}

这是一个jsFiddle来展示它的实际效果.

不幸的是,当div模糊时,宽度会回来.更新:查看Shaggy的答案,找出保留焦点效果的巧妙解决方案.

如果你需要在div模糊之后保持宽度,你可能不得不冒险进入JavaScript/jQuery,或者只是添加一个onclick属性.

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