鼠标悬停或悬停 - 开卷题库

小开

这里有一个工作的例子，我认为你是在要求什么。

 <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;
}
}
});

小开

最佳答案

这里不需要方法。

超文本标示语言

<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
}
})

小开

要显示子元素或兄弟元素，只能使用 CSS。如果在组合子之前使用 :hover(+，~，>，space)。然后样式不应用于悬浮元素。

超文本标示语言

<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; }

小开

我觉得以上逻辑悬停是不正确的。当鼠标悬停的时候，它就会反转。我已经使用以下代码。看起来效果很好。

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

视觉上的例子

data: {
upHere: false
}

希望能帮上忙

小开

我遇到了同样的问题，我解决了！

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

小开

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

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

小开

使用 mouseover时，当鼠标离开悬浮元素时，只有元素保持可见，因此我添加了以下内容:

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

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

小开

使用 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>

小开

可以在组件的模板中严格地切换悬停类，但是，由于显而易见的原因，这不是一个实际的解决方案。另一方面，对于原型设计，我发现不必在脚本中定义数据属性或事件处理程序是有用的。

下面是一个如何使用 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>

小开

下面是 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";
}
}
});

小开

如果你是 不满意，请看一下 一个 href = “ https://www.npmjs.com/package/vue-mouseover”rel = “ nofollow norefrer”> vue-mouseover 软件包，这段代码看起来如何:

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

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

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

<div v-mouseover="isMouseover" />

当 v-mouseover附加到 div元素时，默认情况下 isMouseover也是 最初分配的，所以在第一个 mouseenter/mouseleave事件之前它不会保持未分配状态。

您可以通过 v-mouseover-value指令指定 定制值:

<div
v-mouseover="isMouseover"
v-mouseover-value="customMouseenterValue"/>

或者

<div
v-mouseover="isMouseover"
v-mouseover-value="{
mouseenter: customMouseenterValue,
mouseleave: customMouseleaveValue
}"
/>

自定义默认值 可以在安装过程中通过选项对象传递给包。

小开

不过我会使用新的组合 API 进行更新。

组件

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


<script>
import { ref } from '@vue/composition-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/composition-api'
import { useHover } from './useHover'


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

您还可以使用诸如 @vuehooks/core之类的库，它带有许多有用的函数，包括 useHover。

参考资料: Vuejs 组合 API

小开

这招对我很管用

<template>
<span
v-if="item"
class="primary-navigation-list-dropdown"
@mouseover="isTouchscreenDevice ? null : openDropdownMenu()"
@mouseleave="isTouchscreenDevice ? null : closeDropdownMenu()"
>
<nuxt-link
to="#"
@click.prevent.native="openDropdownMenu"
v-click-outside="closeDropdownMenu"
:title="item.title"
:class="[
item.cssClasses,
{ show: isDropdownMenuVisible }
]"
:id="`navbarDropdownMenuLink-${item.id}`"
:aria-expanded="[isDropdownMenuVisible ? true : false]"
class="
primary-navigation-list-dropdown__toggle
nav-link
dropdown-toggle"
aria-current="page"
role="button"
data-toggle="dropdown"
>
\{\{ item.label }}
</nuxt-link>
<ul
:class="{ show: isDropdownMenuVisible }"
:aria-labelledby="`navbarDropdownMenuLink-${item.id}`"
class="
primary-navigation-list-dropdown__menu
dropdown-menu-list
dropdown-menu"
>
<li
v-for="item in item.children" :key="item.id"
class="dropdown-menu-list__item"
>
<NavLink
:attributes="item"
class="dropdown-menu-list__link dropdown-item"
/>
</li>
</ul>
</span>
</template>


<script>
import NavLink from '@/components/Navigation/NavLink';


export default {
name: "DropdownMenu",
props: {
item: {
type: Object,
required: true,
},
},
data() {
return {
isDropdownMenuVisible: false,
isTouchscreenDevice: false
};
},
mounted() {
this.detectTouchscreenDevice();
},
methods: {
openDropdownMenu() {
if (this.isTouchscreenDevice) {
this.isDropdownMenuVisible = !this.isDropdownMenuVisible;
} else {
this.isDropdownMenuVisible = true;
}
},


closeDropdownMenu() {
if (this.isTouchscreenDevice) {
this.isDropdownMenuVisible = false;
} else {
this.isDropdownMenuVisible = false;
}
},


detectTouchscreenDevice() {
if (window.PointerEvent && ('maxTouchPoints' in navigator)) {
if (navigator.maxTouchPoints > 0) {
this.isTouchscreenDevice = true;
}
} else {
if (window.matchMedia && window.matchMedia("(any-pointer:coarse)").matches) {
this.isTouchscreenDevice = true;
} else if (window.TouchEvent || ('ontouchstart' in window)) {
this.isTouchscreenDevice = true;
}
}
return this.isTouchscreenDevice;
}
},
components: {
NavLink
}
};
</script>


<style scoped lang="scss">
.primary-navigation-list-dropdown {
&__toggle {
color: $white;


&:hover {
color: $blue;
}
}


&__menu {
margin-top: 0;
}


&__dropdown {


}
}


.dropdown-menu-list {
&__item {


}


&__link {
&.active,
&.nuxt-link-exact-active {
border-bottom: 1px solid $blue;
}
}
}
</style>

小开

我认为你想要达到的是

@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>

视觉上的例子

    data : {
activeHover : false
}

注意: 第一双也会影响/传播子元素，但是 第二双只会影响你想要使用它的地方，而不是子元素。否则，使用 第一双会遇到一些小故障/波动。因此，最好使用 第二双来避免任何波动。

我希望，它也能帮助别人:)

小开

也可以使用使用可组合的。

这是老鼠在盘旋的

<script setup>
import { useElementHover } from '@vueuse/core'


const myHoverableElement = ref()
const isHovered = useElementHover(myHoverableElement)
</script>


<template>
<button ref="myHoverableElement">
\{\{ isHovered }}
</button>
</template>

这个是老鼠在盘旋的

import { useMouse } from '@vueuse/core'


const { x, y, sourceType } = useMouse()

甚至是特定元素。

TLDR: 为您的 Vue2/Vue3应用程序提供了不少方便的可组合应用程序！