css 悬停替代(自动)

Question

我的 CSS 必须使用过渡来更改，直到现在我都使用 div:hover 来实现。

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

我该怎么做？

谢谢

永远

Answer 1

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

您可以将点击事件添加到第一个 div，当您点击它时会触发该事件。在事件中选择另一个 div，然后进行转换。

Working Demo

您可以通过添加一个带有 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 */
}