鼠标悬停或悬停vue.js

JavaScript

AJinJin

2020-03-10

将鼠标悬停在vue.js中的元素上时，我想显示一个div。但是我似乎无法正常工作。

似乎vue.js中没有悬停或鼠标悬停的事件。这是真的吗？

是否可以结合使用jquery悬停和vue方法？

第449篇《鼠标悬停或悬停vue.js》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答

TonyItachi 2020.03.10

这是MouseOver和MouseOut的非常简单的示例：

<div id="app">
   <div :style = "styleobj" @mouseover = "changebgcolor" @mouseout = "originalcolor"> 
   </div>
</div>

new Vue({
  el:"#app",
  data:{
     styleobj : {
       width:"100px",
       height:"100px",
       backgroundColor:"red"
     }
  },
  methods:{
    changebgcolor : function() {
      this.styleobj.backgroundColor = "green";
    },
    originalcolor : function() {
      this.styleobj.backgroundColor = "red";
    }
  }
});

小胖Sam 2020.03.10

要显示子元素或同级元素，只能使用CSS。如果使用:hover组合程序之前（+，~，>，space）。然后，该样式不适用于悬停的元素。

的HTML

<body>
  <div class="trigger">
    Hover here.
  </div>
  <div class="hidden">
    This message shows up.
  </div>
</body>

的CSS

.hidden { display: none; }
.trigger:hover + .hidden { display: inline; }

西里JinJin 2020.03.10

随着mouseover只是停留元素时可见叶鼠标悬停元素，所以我加了这一点：

@mouseover="active = !active" @mouseout="active = !active"

<script>
export default {
  data(){
   return {
     active: false
   }
 }
</script>

乐老丝 2020.03.10

我觉得上述悬停逻辑不正确。当鼠标悬停时，它只是反过来。我用下面的代码。它似乎工作正常。

<div @mouseover="upHere = true" @mouseleave="upHere = false" >
    <h2> Something Something </h2>
    <some-component v-show="upHere"></some-component>
</div>

在vue实例上