鼠标移入移出事件

鼠标移入移出事件

  • mousemove:当鼠标移入事件
  • mouseover 当鼠标移出事件
javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <div  @mouseover="showSmallMenu" @mouseleave="mouseleaveBtn">
<!--      mousemove:当鼠标移入事件。-->
<!--      mouseover   当鼠标移除事件-->
    名称
  </div>
  <div style="width: 20px;height: 20px;background-color:#000;" v-show="isShow"></div>
</div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          isShow: false
        },
        methods:{
          showSmallMenu(){
            this.isShow=true
          },
          mouseleaveBtn(){
            this.isShow=false
          }
        }
      })
    </script>
</body>
</html>

记:适用于大屏可视化header

注:仅开发记录 方便查找

相关推荐
UXbot5 小时前
无需设计经验也能做原型:AI辅助工具功能评测
前端·人工智能·低代码·ui·ios·交互
Csvn5 小时前
前端架构设计:构建可维护的大型应用
前端
lichenyang4535 小时前
鸿蒙 ArkUI 走马灯卡片实战:从官方文档检索到 Swiper 实现
前端
喵个咪5 小时前
吃透后台权限系统:从架构设计到 Vue3/React 双框架完整落地
前端·vue.js·react.js
hdsoft_huge5 小时前
全开源数字孪生系统搭建方案:全套技术文档
vue.js·开源·node.js·echarts·webstorm
一起逃去看海吧5 小时前
对接LangSmith
java·前端·数据库
wyhwust5 小时前
web应用技术-第一次课后作业
java·前端·数据库
问心无愧05135 小时前
ctf show web入门257
android·前端·笔记
学且思5 小时前
Vue3 Patch 算法深度解析:从原理到源码实现
前端·vue.js