Question

我希望将鼠标悬停在vue.js中的元素上时显示div。但我似乎无法让它发挥作用。

看起来在vue.js中没有悬停或鼠标悬停的事件。这是真的吗？

是否可以组合jquery hover和vue方法？

Answer 1

我觉得悬停上面的逻辑是不正确的。它只是在鼠标悬停时反转。我用过以下代码。它似乎工作得很好。

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

on vue instance

data : {
    upHere : false
}

希望有所帮助

Answer 2

这里不需要一种方法。

HTML

<div v-if="active">
    <h2>Hello World!</h2>
 </div>

 <div v-on:mouseover="active = !active">
    <h1>Hover me!</h1>
 </div>

JS

new Vue({
  el: 'body',
  data: {
    active: false
  }
})

Answer 3

以下是我认为您要求的实例。

http://jsfiddle.net/1cekfnqw/3017/

 <div id="demo">
        <div v-show="active">Show</div>
        <div @mouseover="mouseOver">Hover over me!</div>
    </div>

var demo = new Vue({
    el: '#demo',
    data: {
        active: false
    },
    methods: {
        mouseOver: function(){
            this.active = !this.active;   
        }
    }
});

Answer 4

为了显示孩子或兄弟元素，只能使用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; }

Answer 5

通过mouseover和mouseleave事件，您可以定义一个切换函数，该函数实现此逻辑并对渲染中的值做出反应。

检查此示例：

var vm = new Vue({
	el: '#app',
	data: {btn: 'primary'}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">


<div id='app'>
    <button
        @mouseover="btn='warning'"
        @mouseleave="btn='primary'"
        :class='"btn btn-block btn-"+btn'>
        {{ btn }}
    </button>
</div>

Answer 6

使用mouseover时，当鼠标离开悬停元素时，只有元素保持可见，所以我添加了这个：

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

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

Answer 7

我认为你想要实现的是结合

@mouseover, @mouseout, @mouseenter and @mouseleave

所以两个最好的组合是

"@mouseover and @mouseout"

或

"@mouseenter and @mouseleave"

我认为，最好使用第二对，这样您就可以实现悬停效果并在其上调用功能。

    <div @mouseenter="activeHover = true" @mouseleave="activeHover = false" >
        <p v-if="activeHover"> This will be showed on hover </p>
        <p v-if ="!activeHover"> This will be showed in simple cases </p>
    </div>

在 vue 实例上

    data : {
        activeHover : false
    }

注意：第一对也会影响/移动子元素，但第二对只会影响您想要使用它的地方，而不是子元素。否则，使用第一对，您会遇到一些故障/波动。因此，最好使用第二对以避免任何波动。

我希望它也能帮助其他人:)

Answer 8

尽管我会使用新的composition api进行更新。

组件

<template>
  <div @mouseenter="hovering = true" @mouseleave="hovering = false">
    {{ hovering }}
  </div>
</template>

<script>
  import { ref } from '@vue/compsosition-api'

  export default {
    setup() {
      const hovering = ref(false)
      return { hovering }
    }
  })
</script>

可重复使用的合成函数

创建useHover函数将使您可以在任何组件中重复使用。

export function useHover(target: Ref<HTMLElement | null>) {
  const hovering = ref(false)

  const enterHandler = () => (hovering.value = true)
  const leaveHandler = () => (hovering.value = false)

  onMounted(() => {
    if (!target.value) return
    target.value.addEventListener('mouseenter', enterHandler)
    target.value.addEventListener('mouseleave', leaveHandler)
  })

  onUnmounted(() => {
    if (!target.value) return
    target.value.removeEventListener('mouseenter', enterHandler)
    target.value.removeEventListener('mouseleave', leaveHandler)
  })

  return hovering
}

这是一个在Vue组件内调用函数的简单示例。

<template>
  <div ref="hoverRef">
    {{ hovering }}
  </div>
</template>

<script lang="ts">
  import { ref } from '@vue/compsosition-api'
  import { useHover } from './useHover'

  export default {
    setup() {
      const hoverRef = ref(null)
      const hovering = useHover(hoverRef)
      return { hovering, hoverRef }
    }
  })
</script>

您还可以使用诸如@vuehooks/core之类的库，其中包含许多有用的功能，包括useHover。

Answer 9

我想出了同样的问题，我就把它解决了！

        <img :src='book.images.small' v-on:mouseenter="hoverImg">

Answer 10

可以在组件模板中严格地将鼠标悬停在类上，但是出于明显的原因，这不是一个实用的解决方案。另一方面，对于原型制作，我发现不必在脚本中定义数据属性或事件处理程序很有用。

这是一个示例，说明如何使用Vuetify尝试图标颜色。

new Vue({
  el: '#app'
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-toolbar color="black" dark>
      <v-toolbar-items>
        <v-btn icon>
          <v-icon @mouseenter="e => e.target.classList.toggle('pink--text')" @mouseleave="e => e.target.classList.toggle('pink--text')">delete</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon @mouseenter="e => e.target.classList.toggle('blue--text')" @mouseleave="e => e.target.classList.toggle('blue--text')">launch</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon @mouseenter="e => e.target.classList.toggle('green--text')" @mouseleave="e => e.target.classList.toggle('green--text')">check</v-icon>
        </v-btn>
      </v-toolbar-items>
    </v-toolbar>
  </v-app>
</div>

Answer 11

有一个正确的工作JSFiddle：http://jsfiddle.net/1cekfnqw/176/

<p v-on:mouseover="mouseOver" v-bind:class="{on: active, 'off': !active}">Hover over me!</p>

Answer 12

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

batch.json

Answer 13

如果您不满意，请看一下 vue-mouseover 软件包：

<div
    @mouseover="isMouseover = true"
    @mouseleave="isMouseover = false"
/>

vue-mouseover 提供了v-mouseover指令，当光标进入或离开该指令所附加的HTML元素时，该指令会自动更新指定的数据上下文属性。

在下一个示例中，默认情况下，当光标位于HTML元素上方时，isMouseover属性的属性为true，否则为false

<div v-mouseover="isMouseover" />

默认情况下，当isMouseover附加到v-mouseover元素时，{strong}会被{strong>初始分配，因此在第一个{{ 1}} / div事件。

您可以通过mouseenter指令指定自定义值：

mouseleave

或

v-mouseover-value

自定义默认值可以在设置过程中通过options object传递给程序包。

Answer 14

这对我来说适合nuxt

Usage: <main class> [-p] [-o=<port>] [-u=<user>]
  -o, --port          Listening port, default is 12345.
  -p, --password      Password for the user.
  -u, --user          The connecting user name.

鼠标悬停或悬停vue.js

14 个答案:

组件

可重复使用的合成函数