css 悬停替代方案（自动）

Question

我的 CSS 必须使用过渡来改变，到目前为止我一直用div:hover它。

当您单击另一个时，需要激活转换div，而不是当您将鼠标悬停在div必须移动/更改的对象上时。

我怎样才能做到这一点 ？

谢谢

翻转

Answer 1

您无法使用 css 处理 dom 元素上的单击事件，您需要使用 javascript 来处理此事件。

您可以向第一个 div 添加单击事件，单击该事件时会触发该事件。在事件中，您选择另一个 div，并进行转换。

工作演示

您可以通过添加带有 css 过渡的类来做到这一点：

网页：

<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 */
}