Question

我想在div标签的css3过渡中实现点击事件。我希望它像一个普通的按钮点击事件。我还是找不到办法做到这一点。请任何人帮助我。

Answer 1

根据 CSS3 过渡：

div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
}

transition-property：指定应用转换的CSS属性的名称。

transition-duration：定义转换所需的时间长度。默认值为0.

transition-timing-function：描述如何计算过渡期间的速度。默认“轻松”。

transition-delay：定义转换何时开始。默认值为0.

剩下的所有其他财产： transition：用于将四个过渡属性设置为单个属性的简写属性。

div
{
    transition: width 1s linear 2s;
}

或如果您想使用普通的css伪类：

鉴于此html：

<button>Click me!</button>

使用这些伪类：

button { }
button:hover { background-color: lime; }
button:active { background-color: fuchsia; }
button:focus { background-color: yellow; }

:hover是鼠标悬停在元素上的时间。

:active是单击元素（并保持）的时间。

:focus是指向元素的标签。

希望它有所帮助！

Answer 2

您有两个基本选项：

在CSS 中使用伪类:active。然后，单击时元素将转换为:active状态（假设锚点）。虽然如果您需要广泛的浏览器覆盖率（即：旧浏览器不支持），这不一定是最好的选择，但它是纯CSS实现的唯一选择。
使用JavaScript 。使用JavaScript，您可以单击切换元素的类，这将允许您更改元素的外观（包括您在其上设置的任何过渡）。类似的东西：
```
$('.selector').click(function(e){
    $(this).toggleClass('new-class');
    e.preventDefault();
});
```

还有第三种 - 非常hacky - 选项涉及使用兄弟形式输入（复选框）并继承它的checked状态，但它可能不是你想要的。

为了后人的缘故，这里有一个小提琴演示我正在谈论的内容（来自a previous Stack Overflow question）：http://jsfiddle.net/nMNJE/