CSS3 过渡:是不是有不使用 JQuery 的点击选项?
Posted
技术标签:
【中文标题】CSS3 过渡:是不是有不使用 JQuery 的点击选项?【英文标题】:CSS3 Transitions: is there an on click option without using JQuery?CSS3 过渡:是否有不使用 JQuery 的点击选项? 【发布时间】:2012-06-25 08:46:06 【问题描述】:这很好用:
<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?
谢谢!
【问题讨论】:
【参考方案1】:你可以这样写:
CSS
inputdisplay: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 + .aniwidth:300px;
HTML
<input type="checkbox" id="button">
<label class="ani" for="button"></label>
查看http://jsfiddle.net/nMNJE/
【讨论】:
谢谢!这非常接近我想要的!【参考方案2】:您有两种选择,一种使用 javascript,另一种使用 CSS 伪类“active”。旧浏览器将支持 javascript 方法,这是我推荐的方法。但是,要使用 CSS 方法,只需将 div:hover 更改为 div:active。
Javascript:
<script type="text/javascript">
function expand()
document.getElementById('id').style.;
</script>
CSS:
<style type="text/css">
div#id
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 */
</style>
html:
<div id="id" onClick="expand()">
Div Content...
</div>
【讨论】:
【参考方案3】:其实有一个不使用javascript的点击选择器。您可以使用 :target 伪类来影响不同的 DOM 元素。 如果一个元素是锚目标的目的地,它将获得 :target 伪元素(要影响被点击的元素,只需将 ID 设置为与其锚标签相同)。
<style>
a color:black;
a:target color:red;
</style>
<a id="elem" href="#elem">Click me</a>
这是一个可以玩的小提琴:https://jsfiddle.net/k86b81jv/
【讨论】:
【参考方案4】:没有使用 sass 的点击没有 css 选择器,所以使用 jquery 可能是你最好的选择
$(document).ready(function()
$('#DIV_ID').click(function()
$(this).animate(width:'300px',200);
);
);
((不要忘记在标题中包含插件链接!!))
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
【讨论】:
以上是关于CSS3 过渡:是不是有不使用 JQuery 的点击选项?的主要内容,如果未能解决你的问题,请参考以下文章