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>