web-dev-qa-db-ja.com

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を含まないのですか？

ありがとう！

cssclickhovertransitions
13
MeltingDog

あなたはこのように書くことができます：

[〜＃〜] 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/

17
sandeep

2つのオプションがあります。1つはjavascriptを使用し、もう1つはCSS疑似クラス「アクティブ」を使用します。 javascriptメソッドは古いブラウザでサポートされ、私がお勧めする方法です。ただし、CSSメソッドを使用するには、div：hoverをdiv：activeに変更するだけです。

Javascript：

<script type="text/javascript">
function expand(){
    document.getElementById('id').style.width="300px";
}
</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
alecwhardy

実際には、javasccriptを使用しないクリックセレクターがあります。 ：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/

1
Dario Corno

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>
0
gardensity