CSS 悬停替代（自动）

Posted 2023-03-06

【中文标题】CSS 悬停替代（自动）

【英文标题】：css hover alternative (automatic)

【发布时间】：2013-03-24 03:41:27

【问题描述】：

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

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

我该怎么做？

谢谢

永远

【问题讨论】：

你需要 javascript 来做到这一点；可以吗？

如果您点击的 div 不是您要制作动画的 div 的父级，则无法编写选择器来匹配它。你必须使用 JavaScript 来做到这一点。

【参考方案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 */

【讨论】：

这是一个正确的答案，但请为 OP 提供一个功能示例。