尐拇指の約定 2022-06-23 15:41 采纳率: 100%
浏览 69
已结题

jquery怎么限制鼠标只能在div内移动？

jquery怎么限制鼠标只能在div内移动？超过div的范围时，鼠标不能移动。

  • 写回答

3条回答 默认 最新

  • 崽崽的谷雨 2022-06-23 16:16
    关注

    这个有点类似于 ，限制范围拖拽 。

    也不知道 你是 想怎么限制 。是 移出就 提示还是什么 。

    你或许 可以 改变思路 ，就是 移出 div 就 禁用鼠标 共能 这样也可以 。或者隐藏 鼠标 曲线 救国

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js限制鼠标范围</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .class {
      width: 400px;
      height: 400px;
      background: red;

    }
  </style>
</head>

<body>
  <div class="box">
    <div class="class">

    </div>
  </div>

</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  let box = document.getElementsByClassName("box")[0];
  $(".class").mouseenter(function () {
    $("body").css({ "cursor": "auto" }); //显示鼠标
  });
  $(".class").mouseleave(function () {
    $("body").css({ "cursor": "none" }); //隐藏鼠标
    // alert("移出")

  });


</script>

</html>

    https://blog.csdn.net/weixin_44599931/article/details/117073530

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

  • 基于jquery的用鼠标画出可移动的div
    2020-10-27 23:16
    在本示例中，我们使用jQuery技术来实现一个通过鼠标操作，在页面上自由画出一个可移动的div元素。这涉及到几个关键的前端技术点：HTML结构、CSS样式以及JavaScript逻辑。 首先，HTML结构为我们提供了一个基础的页面...
  • jquery实现div随着鼠标移动
    2022-06-11 11:49
    万物可爱_85的博客 jquery实现div随着鼠标移动
  • jquery元素跟随鼠标移动.zip
    2022-11-24 12:30
    在前端开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务。"jquery元素跟随鼠标移动"是一个常见的交互效果，常用于创建动态UI或者游戏中的对象追踪。在这个主题中，我们将...
  • jquery实现缩略图边框跟随鼠标移动特效
    2020-06-10 18:32
    "jquery实现缩略图边框跟随鼠标移动特效"就是一个很好的例子，它利用jQuery库为网页中的缩略图添加了交互性。jQuery是一个轻量级、功能强大的JavaScript库，简化了DOM操作、事件处理、动画制作以及Ajax交互。接下来...
  • 当鼠标移动时出现特效的JQuery代码
    2020-10-26 17:22
    在使用JQuery实现鼠标移动时出现特效的代码中，我们可以看到以下几个重要的知识点： 1. HTML结构的设定：整个页面由多个div块组成，每个div块内含表格，其中包含文本内容。例如，“班级管理”和“学生管理”被包裹...
  • jQuery鼠标移动发出气泡动画.zip
    2022-11-22 17:15
    这个“jQuery鼠标移动发出气泡动画.zip”压缩包包含了一个利用jQuery实现的互动效果，当用户鼠标移动时，页面上会产生气泡动画。这种效果常用于增加网站的互动性和趣味性，吸引用户的注意力。 首先，我们要了解...
  • jQuery实现跟随鼠标运动图层效果的方法
    2020-10-24 18:59
    其次是“鼠标运动图层效果”，这里指的是当鼠标在页面上移动时，页面上的一个图层（通常是一个div元素）会根据鼠标的实时位置更新自己的位置，同时显示鼠标的坐标信息。最后是“实现方法”，指的是利用编程技术，...
  • JQuery实现鼠标移动到图片上显示边框效果
    2020-10-26 10:25
    标题中的“JQuery实现鼠标移动到图片上显示边框效果”指的是使用JavaScript库JQuery来设计一个交互式功能，即当用户将鼠标光标悬停在图片上时，图片会自动显示边框。这种效果常见于网站设计中，用于突出显示用户正在...
  • jquery点击div层图片爆炸碎裂效果
    2022-04-08 17:58
    标题中的“jquery点击div层图片爆炸碎裂效果”是指一种基于jQuery实现的前端交互特效，当用户点击一个div元素（通常包含图片）时，图片会模拟出爆炸并碎裂的效果，给用户带来视觉冲击和互动体验。这个效果常用于游戏...
  • html判断鼠标是否移动,web前端：jquery如何判断鼠标是否在当前div上，实战方法...
    2021-06-12 09:37
    汉军威武的博客 jQuery是一个快速、简洁的Javascript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是"writeLess，DoMore"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 7月1日
  • 已采纳回答 6月23日
  • 创建了问题 6月23日