css - CSSホバー代替（自動）

Question

私のCSSはトランジションを使用して変更する必要があり、今までそれを使用div:hoverしていました。

トランジションは、移動/変更する必要があるdivにカーソルを合わせたときではなく、別の をクリックしたときにアクティブにする必要があります。div

どうやってやるの ？

ありがとう

エバート

Answer 1

css を使用して dom 要素のクリック イベントを処理することはできません。これには JavaScript を使用する必要があります。

クリックしたときに発生する最初の div にクリック イベントを追加できます。イベント内で他の div を選択し、トランジションを行います。

ワーキングデモ

これを行うには、css トランジションを使用してクラスを追加します。

HTML:

<div id="clickme">1</div>
<div id="changeMe">2</div>

Javascript:

var el = document.getElementById('clickme');

el.onclick = function() {
    document.getElementById('changeMe').className = "transition";
};

CSS:

.transition{
   /* transition css */
}