如何向已有悬停动画的元素添加onclick事件
如何向已有悬停动画的元素添加onclick事件
提问于 2019-07-12 00:56:49
我有一个动画，当鼠标悬停在上面时会运行，但由于移动设备不能真正悬停在按钮上，我正在尝试添加点击功能。我在尝试将单击事件添加到现有代码时遇到了困难。
因此，目前，动画的工作方式是将鼠标悬停在菜单上，并从菜单后面过渡按钮。我正在尝试有相同的过渡动画时，菜单被点击。我已经尝试过.getElementByID()，但是不知道应该把哪个id放在哪里才能让它工作，也不知道是否需要在HTML中添加一个类。
<div class="btn">
<button id="menu" type="button"><h5>Menu</h5></button>
<div id="box"><a href="info.html"><button id="button-1" type="button"><h4>Info</h4></button></a></div>
<div id="box-2"><a href="about.html"><button id="button-2" type="button"><h4>About Us</h4></button></a></div>
<div id="box-3"><a href="contact.html"><button id="button-3" type="button"><h4>Contact</h4></button></a></div>
</div>#menu:hover ~ #box{
animation-name: myanimation;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: forwards;
animation-fill-mode: forwards;
animation-play-state: running;
}如果能帮助我提高对Javascript的理解，我将不胜感激，谢谢。
回答 1
Stack Overflow用户
发布于 2019-07-12 03:16:18
向click事件上的按钮添加类所需的内容。该类将包含CSS动画，它将在您单击按钮时调用动画。但是因为您有多个按钮，所以需要传递事件来获取要添加类的元素。请看下面的示例以供参考。
function animateBtn(e) {
e = e || window.event;
var element = e.target || element.srcElement;
element.classList.add("active");
}#menu.active ~ #box{
animation-name: myanimation;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: forwards;
animation-fill-mode: forwards;
animation-play-state: running;
}<div class="btn">
<button onclick="animateBtn(event);"" id="menu" type="button">Menu</button>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56994079
复制相关文章
相似问题