我有一个动画,当鼠标悬停在上面时会运行,但由于移动设备不能真正悬停在按钮上,我正在尝试添加点击功能。我在尝试将单击事件添加到现有代码时遇到了困难。
因此,目前,动画的工作方式是将鼠标悬停在菜单上,并从菜单后面过渡按钮。我正在尝试有相同的过渡动画时,菜单被点击。我已经尝试过.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的理解,我将不胜感激,谢谢。
发布于 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>
https://stackoverflow.com/questions/56994079
复制相似问题