javascript - 自定义光标卡在左上角-6ren

javascript - 自定义光标卡在左上角

转载作者：行者123 更新时间：2023-12-04 08:10:40

25

4

我在使用混合模式排除制作自定义光标时遇到问题。我尝试了几种技术，但出于某种奇怪的原因，我添加了一个带有混合模式的光标，但是它只显示在我页面的左上 Angular 并且不会移动。我希望它成为主光标，但不知道如何修复它。
代码笔:https://codepen.io/ryanforprez/pen/vYyEWyL

    .cursor {
   position: fixed;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: #ffff;

   mix-blend-mode: difference;
   z-index: 999;

  transition: transform 0.2s;
 }

 html,
 * {
 cursor: none;
pointer-events: none;

 }



<html>
<body onclick='window.location.href="work.html"'>
    
     </body>
 </html>

  <body>

    <div class="nav">

     <div class="name"><a href="work.html">Ryan Stewart</a></div>
<div class="info"><a href="information.html">Information</a></div>

</div>

        <div class="contact">   <a href="work.html">Click anywhere to enter.</a>
</div>



<marquee width="100%" direction="left" scrollamount="15" behavior="scroll">Ryan Stewart: Graphic Design, Art Direction, Letterform Design</marquee>

  <script>$(document).ready(function() {
  $(".hamburger-menu-button").click(function() {
  $(".main-box").toggleClass("main-box-clicked");
  $(".hamburger-box").toggleClass("hamburger-box-clicked");
  });

  var cursor = $(".cursor");

  $(window).mousemove(function(e) {
  cursor.css({
  top: e.clientY - cursor.height() / 2,
  left: e.clientX - cursor.width() / 2
  });
  });

  $(window)
  .mouseleave(function() {
  cursor.css({
    opacity: "0"
  });
  })
 .mouseenter(function() {
  cursor.css({
    opacity: "1"
  });
 });

 $(".link")
.mouseenter(function() {
  cursor.css({
    transform: "scale(3.2)"
  });
})
.mouseleave(function() {
  cursor.css({
    transform: "scale(1)"
  });
});

 $(window)
.mousedown(function() {
  cursor.css({
    transform: "scale(.2)"
  });
})
.mouseup(function() {
  cursor.css({
    transform: "scale(1)"
  });
});
 });</script>

最佳答案

我认为这是因为您有多个打开和关闭正文和 html 标签，简而言之，因为您的代码很困惑。遵循正确缩进、清理和工作的版本:

$(document).ready(function() {
      $(".hamburger-menu-button").click(function() {
      $(".main-box").toggleClass("main-box-clicked");
      $(".hamburger-box").toggleClass("hamburger-box-clicked");
      });

      var cursor = $(".cursor");

      $(window).mousemove(function(e) {
      cursor.css({
      top: e.clientY - cursor.height() / 2,
      left: e.clientX - cursor.width() / 2
      });
      });

      $(window)
      .mouseleave(function() {
      cursor.css({
        opacity: "0"
      });
      })
     .mouseenter(function() {
      cursor.css({
        opacity: "1"
      });
     });

     $(".link")
    .mouseenter(function() {
      cursor.css({
        transform: "scale(3.2)"
      });
    })
    .mouseleave(function() {
      cursor.css({
        transform: "scale(1)"
      });
    });

     $(window)
    .mousedown(function() {
      cursor.css({
        transform: "scale(.2)"
      });
    })
    .mouseup(function() {
      cursor.css({
        transform: "scale(1)"
      });
    });
     });

.cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #cccc;
  
    mix-blend-mode: difference;
    z-index: 999;
    transition: transform 0.2s;
}

* {
    cursor: none;
    pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
    <div class="name">
        <a href="work.html">Ryan Stewart</a>
    </div>
    <div class="info">
        <a href="information.html">Information</a>
    </div>

</div>
<div class="contact">
    <a href="work.html">Click anywhere to enter.</a>
</div>
<marquee width="100%" direction="left" scrollamount="15" behavior="scroll">Ryan Stewart: Graphic Design, Art Direction, Letterform Design</marquee>
<div class="cursor"></div>

关于javascript - 自定义光标卡在左上角，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65983696/

25

4

0

文章推荐： symfony - 类 "1\HomeController"不存在

文章推荐： python - Pandas 多索引 DataFrame 为每个索引添加子索引

文章推荐： c - 链接器如何生成最终的虚拟内存地址？

javascript - 如何删除谷歌地图的位置框(左上角)？
我正在尝试使用 Google map 的 iframe 在我的网站上列出来自 Google map 的所有仓库位置: 目前，我一直在研究如何删除位置框(左上角)，因为我将其用作 iframe。有没有
c# - 样式数据网格表 - 左上角
我正在设计数据表的样式，但我不知道如何设计数据网格左上角的样式。就是这张图中的灰色区域: 你知道怎么做吗？到目前为止，这是我的风格:
javascript - 左上角 Logo 滚动到屏幕停止
我正在尝试在导航栏的左上角添加一些文本。单击后，我希望页面自动滚动回页面顶部 HTML: LOGO HERE Services
text - SVG 文本 anchor 左上角
默认情况下，SVG 中文本元素的 anchor 在左下角，但我希望它在左上角，因为我还创建了一个矩形作为文本的背景，但它显示不正确，因为文本高于矩形(因为矩形 anchor /偏移位于左上角)。有没有
html - 左上角 Div "overflowing(?)"的内容
我需要的是将 DIV 的内容溢出(如果这是正确的词，我不会溢出)到左侧和顶部，并保持 DIV 大小始终固定。这是我制作的图像: 正常结果是 DIV 变为 70x76(其内容的大小)，但我需要保持 DI
html - div 左上角/右下角的斜 Angular
我们如何在纯 CSS 中创建这个形状？最佳答案你可以像下面这样: html and the css div { height: 300px; background:
html - DIV 左上角 CSS 动画后的额外像素
无法诊断 div 左上角 float 像素的原因。它只在我添加了一个 border-radius 后出现。仔细观察每个 Angular ，您会看到一些碎片，因为它在应用半径之前应用了直线。也许需要一
algorithm - DP 左上角 vs 右下角表格填充。什么时候使用哪个？
有很多问题需要从左上角(例如:编辑距离)和从右下角开始(例如:回文子串)填表。有什么时候使用哪个的直观解释吗？引用资料: http://www.geeksforgeeks.org/dynamic-pr
javascript - 无法将 FabricJS svg 或组对象移动到 Canvas 左上角
我正在开发一个 FabricJS 应用程序，我希望用户通过简单的单击即可将对象移动到 Canvas 原点，即使在旋转或缩放对象或一组对象之后也是如此。为此，当用户单击时，我会执行以下代码: obj.l
html - 元素定位。定位时改 rebase 点(左上角)(不变换)
我在定位元素时遇到错误。浏览器通过查看元素的左上角来计算元素的位置。让我们说那个点(左上角)“基础”(抱歉这个术语)当我使用对齐或中心对象时，它工作正常。但是，如果我用其他属性更改元素的位置，比如说
c++ - 禁用 QDialogs 默认关闭按钮(左上角 "cross button")？
是否可以禁用/删除对话框左上角的QDialogs默认关闭按钮？最佳答案至少在(嵌入式)Linux 中，您可以这样做: setWindowFlags(Qt::Window | Qt::WindowT
objective-c - 当应用程序是 LSUIElement 时，使应用程序的名称出现在菜单栏(左上角)中
我如何让应用程序的名称出现在此处(就像普通应用程序一样)... alt text http://snapplr.com/snap/6sgc ...当应用程序是 LSUIElement 时。我的问题是
html - 如何将内容对齐到 div 的所有四个 Angular (右上角、左上角、右下角、左下角)并在每个 Angular 上留边距？
我有一个 div，我想在 div 的右下角放一张图片，在左下角放一些图片。它们的高度不同，所以我想确保它们都与 div 的底部对齐。首先，我使用以下方法使右下角对齐: position: ab
html - 无法在具有 border-top-left-radius 和 border-width 的三 Angular 形对象中创建圆 Angular 左上角
如何在使用 border-width 时添加边框半径？我想添加 border-top-left-radius 为 15px。我有这段代码可以创建一个三 Angular 形对象，它看起来不错，但我希望

首页

博学

6Ren·AI

商城

javascript - 自定义光标卡在左上角