vue 鼠标移入移出(hover)切换显示图片问题

目录
  • 鼠标移入移出(hover)切换显示图片
    • css实现
    • js实现
  • vue鼠标移入移出事件注意事项
    • 发生冒泡事件
    • 一、解决方法
    • 二、定义
    • 三、两对鼠标事件的区别

鼠标移入移出(hover)切换显示图片

css实现

代码:

<div @click="exitConnect()" class="exit_hover">
       <img class="exit1 mr10" :src="exit" style="width:20px;height:20px;" />
       <img class="exit2 mr10" :src="exitActive" style="width:20px;height:20px;" />断开连接
</div>

css:

.exit_hover .exit1{display:inline-block;}
.exit_hover .exit2{display:none;}
.exit_hover:hover .exit1{display:none;}
.exit_hover:hover .exit2{display:inline-block;}

js实现

使用一个变量来表示鼠标移入或移出的状态,鼠标移入事件mouseenter,移出事件mouseleave,在这两个事件中来修改这个变量。

注意:移出事件别用mouseout。

代码:

<div @mouseenter="isExitHover=true" @mouseleave="isExitHover=false" class="menus">
       <img v-show="!isExitHover" :src="exit" style="width:16px;height:16px;" class="mr10" />
       <img v-show="isExitHover" :src="exitActive" style="width:16px;height:16px;" class="mr10" />断开连接
</div>

data:

            exit: require("@/assets/img/exit.svg"),
            exitActive: require("@/assets/img/exit_active.svg"),
            isExitHover:false,//是否悬浮到图标上

vue鼠标移入移出事件注意事项

发生冒泡事件

今天在写一个鼠标的移入移出的事件,使用mouseout和mouseover期间,踩了一个大坑,经过半天的排查,终于发现是发生了冒泡事件。

把mouseout和mouseover绑在父元素上,移过父元素和子元素都会触发。即子元素mouseover和mouseout事件会冒泡至父元素

一、解决方法

使用 mouseenter 和 mouseleave 事件。

这两个事件是根据组件在页面上的范围进行计算的,只要在某个组件上添加了这两个事件,会计算鼠标的位置,只要在组件范围内,就可以触发。

二、定义

1、mouseenter:在鼠标光标从元素外部首次移动到元素范围之内时触发,这个事件不冒泡。

2、mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发,这个事件不冒泡。

3、mouseover:在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发。

4、mouseout:在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部,也可能是该元素的子元素。

三、两对鼠标事件的区别

其中,mouseover触发优先级高于mouseenter,mouseout触发优先级高于mouseleave

1、mouseover 和 mouseout

不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover

不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。

是根据鼠标事件的target进行触发的,是一种精确触发。当为某一组件(如div)设置这两个事件时,当事件的target是该组件时,就会触发mouseover,但是当鼠标划到该组件的子组件上时,因为target改变了,所以就触发了 mouseout 事件,这往往就会造成页面元素的闪烁,反复触发移入移出事件。

2、mouseenter 和 mouseleave

只有在鼠标指针从元素外穿入被选元素(到元素内)时,才会触发 mouseenter 事件。

只有在鼠标指针从元素内穿出被选元素(到元素外)时,才会触发 mouseleave 事件。

mouseenter 和 mouseleave是根据组件在页面的范围(坐标)进行触发的。不管组件中是否有子组件,只要鼠标进入到组件的范围内,就可以触发mouseenter事件,离开范围,则触发mouseleave事件。

总结一下:

在实际开发过程中,更多的是针对范围的操作。如果鼠标在某个组件(如div)范围内就触发进入组件的操作,如果离开这个组件的页面范围,就触发离开的事件。

所以,一般情况下都不推荐使用mouseover与mouseout 最好使用mouseleavemouseenter

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue transx组件切换动画库示例详解

    目录 来个介绍 安装 使用 支持参数 支持事件 支持API 支持的动画类型 说明 来个介绍 先奉上组件库的名称:transx github地址:github.com/tnfe/transx npm参考: www.npmjs.com/package/tra… 示例地址:codesanbox 安装 npm install transx or yarn add transx 使用 <!-- 包裹动画元素 --> <trans-x :time="time" :delay=&q

  • Vue2 响应式系统之分支切换

    目录 场景 observer(data) new Watcher(updateComponent) data.ok = false data.text = "hello, liang" 问题 去重 重置 测试 总结 场景 我们考虑一下下边的代码会输出什么. import { observe } from "./reactive"; import Watcher from "./watcher"; const data = { text: &quo

  • vue开发设计分支切换与cleanup实例详解

    目录 分支切换与cleanup 了解分支切换 分支切换导致的问题 如何清除掉副作用函数的无效关联关系? 疑问:为什么对传入的副作用函数进行一层包裹? 完整代码 产生的问题:代码运行发生栈溢出 如何解决此种情况下的栈溢出? 嵌套的effect与effect栈 effect嵌套的场景? 初始化 原因: 支持嵌套 避免无限递归循环 产生无限递归循环的代码: 原因分析: 解决循环 完整代码 分支切换与cleanup 了解分支切换 代码示例如下 const data = { ok: true, text:

  • vue.js树形组件之删除双击增加分支实例代码

    html代码: <script type="text/x-template" id="item-template"> <li> <div :class="{bold: isFolder}" @click="toggle"> {{model.name}} <span v-if="isFolder">[{{open ? '-' : '+'}}]</span&

  • 使用vue-antd动态切换主题

    目录 vue-antd动态切换主题 安装依赖 Vue3.0 + Antd,修改antd主题色,配置全局css vue-antd动态切换主题 安装依赖 1 webpack-theme-color-replacer: yarn add webpack-theme-color-replacer@1.3.22 2 less: yarn add less@2.7.2 3 less-loader: yarn add less-loader@7.0.2 在vue.config.js中加入配置 const cr

  • Vue中的table表单切换实现效果

    目录 Vue表单切换实现效果 首先给两个链接定义 一个num Vue table切换组件 Vue表单切换实现效果 点击第一个链接 出现以下数据 点击第二个链接 ,我没有写后台所以没有数据, 可以自己写方法去获取数据复制给v-model 绑定的数组 首先给两个链接定义 一个num 点击第一个按钮时 设置num等于1 , 这样在table列表处定义 v-show ="num==1 ",当等于1 时 显示第一个table 当等于num 等于 2时 等于第二个table 这样就能实现 tabl

  • vue 鼠标移入移出(hover)切换显示图片问题

    目录 鼠标移入移出(hover)切换显示图片 css实现 js实现 vue鼠标移入移出事件注意事项 发生冒泡事件 一.解决方法 二.定义 三.两对鼠标事件的区别 鼠标移入移出(hover)切换显示图片 css实现 代码: <div @click="exitConnect()" class="exit_hover">        <img class="exit1 mr10" :src="exit" styl

  • jQuery实现鼠标移入移出事件切换功能示例

    本文实例讲述了jQuery实现鼠标移入移出事件切换功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js"></script> <style> #msg { color

  • js实现鼠标移入移出卡片切换内容

    本文实例为大家分享了js实现鼠标移入移出卡片切换内容的具体代码,供大家参考,具体内容如下 案例动态效果图: html代码: <div class="sports-purple"> <div class="all"> <!-- 内容 --> <div class="content"> <div class="first-block"> <!-- 内容的侧边栏 --

  • 鼠标移入移出事件改变图片的分辨率的两种方法

    最近在做一个鼠标移入移出图片事件,有几种方法大家可以试一下 首先是改变分辨率的两种方法,鼠标移入图片和移出图片的分辨率不同 方法一 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title

  • vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法

    鼠标移入添加class样式 HTML HTML绑定事件,加入或者移出class为active <div class="col-lg-3 col-xs-6 paddingLeft com_marginBtm10 choosePlan" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)"> 流量套餐 </div> JS 这里除了a

  • vue实现鼠标移入移出事件代码实例

    本文实例为大家分享了vue实现鼠标移入移出事件的具体代码,供大家参考,具体内容如下 <div class="index_tableTitle clearfix" v-for="(item,index) in table_tit"> <div class="indexItem"> <span :title="item.name">{{item.name}}</span> <s

  • 鼠标移入移出改变CSS样式的小例子

    网页上的某个区域,当鼠标移入时改变样式,鼠标移出时自动恢复样式,可以是一个图片的边框,也可以一段文字变色,掌握了原理,貌似可以做更加丰富生动的网页互动效果,这里主要是利用Js控制Hover标签所在的DIV产生动作,也是学习的好范例. 鼠标移入移出改变CSS样式 body{color:#fff;font:12px/1.5 Tahoma;} #div1{width:150px;height:150px;margin:0 auto;padding:10px;background:black;borde

  • javascript表格隔行变色加鼠标移入移出及点击效果的方法

    本文实例讲述了javascript表格隔行变色加鼠标移入移出及点击效果的方法.分享给大家供大家参考.具体分析如下: 表格隔行变色,也是一个提高用户体验的js效果. 效果实现: 表格奇偶行的颜色不一样.这样可以防止用户看数据时串行. 鼠标移入某行时变颜色,移出再变回来.这样可以让用户清楚的知道自己正在看哪一行. 表格点击变色.便于用户选中自己想保留的项.   说明: i%2 每个数和2取模的值,只有0和1两种,这样就可以实现隔行变色的效果 tables_li[i].onoff = 1;  为了实现

  • js判断鼠标移入移出方向的方法

    PC端鼠标移入移出的效果很好,这里就给出判断鼠标移入移出的方法,有空再发出带效果的文章,不过授之以鱼不如受之以渔,有了个这个方法,效果不还是so easy吗? 代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi

  • Javaweb 鼠标移入移出表格颜色变化的实现

    最近在学习JavaWeb时,有用到鼠标移动事件,所以今天在这里记录一个相关的案例,同时也是对相关知识的一个巩固,效果为在鼠标移动到表格对应行列时,该行列的背景颜色发生变化. 效果如下: 其中用到是onmouseover和onmouseou事件t,同时还有一个作用相似的事件叫做onmousemove,所以在这里先对这三种鼠标事件做一个简单的对比: 在时间上:如果两个事件同时存在,先是onmousemove事件触发后,才会触发onmouseover事件. 在按钮上:onmousemove和onmou

随机推荐