CSS3转换点击事件

Question

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

Answer 1

您有两个基本选项：

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

还有第三个 - 非常hacky - 选项涉及使用同级表单输入（复选框）并继承它的checked状态，但这可能不是您要找的。

为了后代，这里有一个 Fiddle 演示了我在说什么（来自之前的 Stack Overflow 问题）：http : //jsfiddle.net/nMNJE/

Answer 2

根据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 当你选择元素时.

希望能帮助到你!