鼠标移入移出事件

鼠标移入移出事件

  • 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

注:仅开发记录 方便查找

相关推荐
Learner3 分钟前
Python异常处理
java·前端·python
tao3556676 分钟前
VS Code登录codex,报错(os error 10013)
java·服务器·前端
军军君019 分钟前
Three.js基础功能学习七:加载器与管理器
开发语言·前端·javascript·学习·3d·threejs·三维
JarvanMo12 分钟前
情迷服务器驱动 UI:我在 Flutter 开发中的爱与哀愁
前端
tzy23314 分钟前
分享一个 HTTP(S) 代理&抓包工具,拦截和Mock Web客户端请求和服务端响应
前端·网络协议·http
代码小学僧20 分钟前
普通前端仔的 2025 : 年终总结与 AI 对我的影响
前端·程序员·ai编程
Mike_jia26 分钟前
TCP 粘包/拆包问题
前端
沐墨染33 分钟前
敏感词智能检索前端组件设计:树形组织过滤与多维数据分析
前端·javascript·vue.js·ui·数据挖掘·数据分析
Kagol35 分钟前
🎉TinyPro v1.4.0 正式发布:支持 Spring Boot、移动端适配、新增卡片列表和高级表单页面
前端·typescript·开源
李少兄36 分钟前
B/S 架构:现代 Web 应用的核心架构模式
前端·架构·b/s