Question

我有一个悬停时会运行的动画，但是由于移动设备无法真正将鼠标悬停在按钮上，因此我试图添加单击功能。我在尝试将click事件添加到我现有的代码时遇到困难。

因此，当前，动画是通过将鼠标悬停在Menu上来实现的，并且按钮从其后面过渡。单击菜单时，我试图设置相同的过渡动画。我已经尝试过.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理解的任何帮助。

Answer 1

在单击事件上需要向按钮添加类的内容。此类将包含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>

如何将onclick事件添加到已经具有悬停动画的元素

1 个答案: