CSS3 过渡:是否有不使用 JQuery 的点击选项?

CSS3 Transitions: is there an on click option without using JQuery?(CSS3 过渡:是否有不使用 JQuery 的点击选项?)

问题描述

这很好用:

<style type="text/css"> 
    div
    {
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
    }

    div:hover
    {
    width:300px;
    }
    </style>

但是有没有人知道使用点击而不是悬停来做到这一点的方法?不涉及JQuery?

But does anyone know of a way to do this using click instead of hover? And not involving JQuery?

谢谢！

推荐答案

可以这样写:

CSS

input{display:none}
.ani
    {
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
    display:block;
    }
input:checked + .ani{width:300px;}

HTML

<input type="checkbox" id="button">
<label class="ani" for="button"></label>

检查这个 http://jsfiddle.net/nMNJE/

这篇关于CSS3 过渡:是否有不使用 JQuery 的点击选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！