CSS CSS3 Transitions：是否有不使用 JQuery 的点击选项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11166580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 Transitions: is there an on click option without using JQuery?
提问by MeltingDog
This works great:
这很好用：
<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>
But does anyone know of a way to do this using click instead of hover? And not involving JQuery?
但是有没有人知道使用点击而不是悬停来做到这一点的方法？不涉及JQuery？
Thanks!
谢谢！
回答by sandeep
You can write like this:
你可以这样写：
CSS
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
HTML
<input type="checkbox" id="button">
<label class="ani" for="button"></label>
Check this http://jsfiddle.net/nMNJE/
回答by alecwhardy
You have two options, one using javascript and one using the CSS pseudo-class "active". The javascript method will be supported on older browsers, and is what i would recommend. However, to use the CSS method just change div:hover to div:active.
您有两种选择，一种使用 javascript，另一种使用 CSS 伪类“active”。较旧的浏览器将支持 javascript 方法，这是我推荐的。但是，要使用 CSS 方法，只需将 div:hover 更改为 div:active。
Javascript:
Javascript：
<script type="text/javascript">
function expand(){
document.getElementById('id').style.width="300px";
}
</script>
CSS:
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:
HTML：
<div id="id" onClick="expand()">
Div Content...
</div>
回答by Dario Corno
Actually there is a click selector without using javasccript. You can affect differente DOM elements using :targetpseudo class. If an element is the destination of an anchor target it will get the :targetpseudo element (to influence the clicked element just set the ID the same as its anchor tag).
实际上有一个不使用 javasccript 的点击选择器。您可以使用:target伪类影响不同的 DOM 元素。如果元素是锚点目标的目的地，它将获得:target伪元素（要影响被点击的元素，只需将 ID 设置为其锚点标签即可）。
<style>
a { color:black; }
a:target { color:red; }
</style>
<a id="elem" href="#elem">Click me</a>
Here is a fiddle to play with : https://jsfiddle.net/k86b81jv/
这是一个可以玩的小提琴：https: //jsfiddle.net/k86b81jv/
回答by gardensity
there is no css selector for clicks without using sass, so using jquery is probably your best bet
没有使用 sass 的点击没有 css 选择器，所以使用 jquery 可能是你最好的选择
$(document).ready(function(){
$('#DIV_ID').click(function(){
$(this).animate({width:'300px'},200);
});
});
((don't forget to include the plugin link in your header!!))
（（不要忘记在标题中包含插件链接！！））
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
