CSS 悬停替代(自动)
Posted
技术标签:
【中文标题】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 提供一个功能示例。以上是关于CSS 悬停替代(自动)的主要内容,如果未能解决你的问题,请参考以下文章