Question

我是VueJS的新手，如何在鼠标悬停或加键时为div设置动画？

这是我到目前为止尝试过的，

<div id="demo">
  <div class="menu">
    <ul>
      <li><a href="#">menu1</a></li>
      <li><a href="#">menu2</a></li>
      <li><a href="#">menu3</a></li>
    </ul>
  </div>
</div>


*{ margin:0; padding:0 }

.menu {position:absolute; top:0; left:0; width:100%; height:30px; overflow:hidden; background:gray}
.menu.active { height:auto; transition:0.5s all; overflow:visible }
.menu li { height:30px;}


new Vue({
  el: '#demo',
  data: { 
  }
})

当键盘或鼠标悬停时，我试图将“ active”类添加到“ menu” div标签中。同样，当鼠标移开或按下鼠标时，请删除“活动”类。

这是演示https://codepen.io/ezrinn/pen/JjXwpaP

Answer 1

看起来您只需要悬停效果。您不需要javascript，只需在CSS中使用:hover即可，基本上将.menu.active更改为.menu:hover：

.menu:hover { height:auto; transition:0.5s all; overflow:visible }

https://codepen.io/leopsidom/pen/QWEjEWa

在Vue鼠标悬停事件中

1 个答案: