是否可以使用存盤在變數中的自定義影像來更改游標？
我嘗試過 setAttribute 或 .style.cursor，但它似乎不起作用..
以下是我嘗試過的一些示例：
var MyImage = MyImage.png;
document.getElementById("DivWithMouseOverEvent").style.cursor = MyImage;
我也試過：
var MyImage = MyImage.png;
document.getElementById("DivWithMouseOverEvent").setAttribute("cursor", MyImage);
這個想法是 var MyImage 可能會根據用戶的某些操作而改變。
我知道 Firefox 需要第二個游標選項，但我不知道如何使用變數。
uj5u.com熱心網友回復：
這是我的例子。希望它可以幫助你
<!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>
uj5u.com熱心網友回復：
--------只需直接運行此代碼即可確認
<!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>uj5u.com熱心網友回復：
給出的代碼有幾個問題。
影像定義不僅需要是字串，還需要是 url。
此外，回退是強制性的（不僅僅是 Firefox 需要）。
有關允許的內容的更多詳細資訊，請參閱MDN。
let MyImage = 'https://i.stack.imgur.com/LZ9aI.png';
document.getElementById("DivWithMouseOverEvent").style.cursor = 'url(' MyImage '), grab';#DivWithMouseOverEvent {
width: 50vw;
height: 50vh;
background: cyan;
}<div id="DivWithMouseOverEvent"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/475581.html
標籤：javascript css 图片 光标 设置属性