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 悬停替代(自动)的主要内容,如果未能解决你的问题,请参考以下文章

将鼠标悬停在css上时如何暂停幻灯片自动播放?

使用 jQuery 自动为所有悬停状态设置动画

如何自动调整以适应 WP 中悬停文本描述图像中的所有文本

平板电脑悬停替代

使用css自动发光效果

HTML CSS 在悬停时显示文本框