js 鼠标效果

一. 鼠标悬停效果和离开效果

鼠标效果和v-if 配合使用效果很好

<a class="all btn" href="#"   v-on:mouseover="sortAll" v-on:mouseleave='leave()'>全部商品分类</a>
                <ul v-if="seen" id="sortlist"></ul>

 

1. js 用 onmouseenter  onmouseleave

<h1 id="demo" onmouseenter="mouseEnter()" onmouseleave="mouseLeave()">鼠标移到我这</h1>

vue用 v-on:mouseenter   v-on:mouseleave 或  @mouseenter @mouseleave

注意当div完全隐藏时在使用mouseleave无效

<div id="app">
    <input v-model="message"/>
    <p>{{ message }}</p>
    <button  v-on:mouseenter="show" v-on:mouseleave="leave">点我</button>
</div>
 

2. v-on:mouseover v-on: mouseout 

mouseover 和mouseenter却别

<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>