当前位置： 文江博客话题详情

JS更改存储在变量中的图像的光标

发布于 2025-01-28 19:17:33 字数 457 浏览 2 评论 0原文

是否可以使用存储在变量中的自定义图像更改光标？

我尝试过setAttribute或.pstyle.cursor，但它似乎不起作用。.

以下是我尝试过的一些示例：

var MyImage = MyImage.png;
document.getElementById("DivWithMouseOverEvent").style.cursor = MyImage;

我也尝试过：

var MyImage = MyImage.png;
document.getElementById("DivWithMouseOverEvent").setAttribute("cursor", MyImage);

想法是，var myimage可能会根据用户的某些操作而改变。

我知道Firefox需要第二个光标选项，但我不知道如何使用变量进行操作。

原文

Is it possible to change the cursor with a customized image stored in a variable?

I have tried setAttribute or .style.cursor, but it does not seems to work..

Here are some examples of what I have tried:

var MyImage = MyImage.png;
document.getElementById("DivWithMouseOverEvent").style.cursor = MyImage;

I also tried:

var MyImage = MyImage.png;
document.getElementById("DivWithMouseOverEvent").setAttribute("cursor", MyImage);

The idea is that the var MyImage may change depending on some actions by the user.

I know Firefox requires a second cursor option, but I do not know how to do it with a variable.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

把昨日还给我 2025-02-04 19:17:34

给出的代码有两个问题。

图像定义不仅需要是字符串，还需要一个URL。

另外，必须有后备（不仅是Firefox所要求的）。

参见 mdn 有关允许的内容的更多详细信息。

let MyImage = 'https://i.sstatic.net/LZ9aI.png';
document.getElementById("DivWithMouseOverEvent").style.cursor = 'url(' + MyImage + '), grab';
#DivWithMouseOverEvent {
  width: 50vw;
  height: 50vh;
  background: cyan;
}
<div id="DivWithMouseOverEvent"></div>

There are a couple of problems with the code given.

The image definition needs to be not only a string, but also a url.

Also, a fallback is mandatory (not just required by Firefox).

See MDN for more detail on what is allowed.

let MyImage = 'https://i.sstatic.net/LZ9aI.png';
document.getElementById("DivWithMouseOverEvent").style.cursor = 'url(' + MyImage + '), grab';
#DivWithMouseOverEvent {
  width: 50vw;
  height: 50vh;
  background: cyan;
}
<div id="DivWithMouseOverEvent"></div>

回复 原文
掩饰不了的爱 2025-02-04 19:17:34

这是我的例子。希望它可以帮助您

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <h1 id="title">
      This is a static template, there is no bundler or bundling involved!
    </h1>
    <script>
      const cursor = "Ball.cur";
      const url = `url(${cursor}), auto`;
      const title = document.getElementById("title");

      title.style.cursor = url;
    </script>
  </body>
</html>

This is my example. Hope it can help you

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <h1 id="title">
      This is a static template, there is no bundler or bundling involved!
    </h1>
    <script>
      const cursor = "Ball.cur";
      const url = `url(${cursor}), auto`;
      const title = document.getElementById("title");

      title.style.cursor = url;
    </script>
  </body>
</html>
回复 原文
攒一口袋星星 2025-02-04 19:17:34

------- 只需直接运行此代码即可确认

<!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>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .cursor{
            cursor: wait;
        }
        div.cursor{
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
    
    <div class="cursor" >
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos, nobis cupiditate mollitia expedita voluptatibus quas sunt? Voluptatibus neque harum pariatur, laboriosam facere autem dolor reiciendis, quas necessitatibus est, amet quia?
    </div>

    <script>
        
        
            $(function () {
                $('.cursor').on('mouseenter', function(){
                    $(this).css({'cursor': "url('https://ani.cursors-4u.net/others/oth-9/oth927.cur'), auto", 'color':'orange', 'padding': '8px'});
                })
            })
        
    </script>
</body>
</html>

-------Simply run this code direct to confirm please

<!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>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .cursor{
            cursor: wait;
        }
        div.cursor{
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
    
    <div class="cursor" >
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos, nobis cupiditate mollitia expedita voluptatibus quas sunt? Voluptatibus neque harum pariatur, laboriosam facere autem dolor reiciendis, quas necessitatibus est, amet quia?
    </div>

    <script>
        
        
            $(function () {
                $('.cursor').on('mouseenter', function(){
                    $(this).css({'cursor': "url('https://ani.cursors-4u.net/others/oth-9/oth927.cur'), auto", 'color':'orange', 'padding': '8px'});
                })
            })
        
    </script>
</body>
</html>

回复 原文
~没有更多了~

关于作者

还给你自由

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文