定制

Question

if(!CSS.supports('cursor', 'url(cursor.png), pointer')) {
    var myCursor = document.createElement('img');

    myCursor.src = 'cursor.png';
    myCursor.style.position = 'absolute';
    document.body.appendChild(myCursor);

    document.addEventListener('mousemove', function(e) {
        myCursor.style.left = e.pageX+'px';
        myCursor.style.top = e.pageY+'px';
    }, false);
}

body{
    padding:0;
    margin:0;
    background-color: #19321D;
    color: #53CC66;
    line-height: 1.5;
    font-family: FreeMono, monospace;
    cursor: url(cursor.png), pointer;
}

a{
    text-decoration: none;
    color: #53CC66;
}

ul{
    text-decoration: none;
    list-style-type: none;
}

#header{
    text-align: center;
    border-bottom: 3px solid #53CC66;
    margin-bottom: 100px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    line-height: 1;
}

h1, h2, h3{
    color: #53CC66;
    font-family: FreeMono, monospace;
    font-size: 15px;
}

a{
  cursor: url(cursor.png), pointer;  
}

a:hover {
  cursor: url(cursor.png), pointer;  
  color: #19321D;
}

li:hover{
background-color:#53CC66;  
color: #19321D;
}

li:hover a{  
color: #19321D;
}

<html>
<head>
<title>Getrate|Command promph </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles15.css" type="text/css" />
</head>
<body>
   
<div id="wrapper">
    <div id="header">
        
            <h1>DAVID SECRET INDUSTRIES UNVERIFIED SYSTEM</h1>
            <h2>COPYRIGHT 2015 - 2050 ALL RIGHT RESERVED</h2>
            <h3>- SERVER #1 -</h3>
        
    </div>
    
    <ul>
    <li><a href="birthday.php">[CONZOLE]  >  -TOP SECRET- . PAGE //stripslash 1.3.8.9.84.113.21.73</a></li>
    <li><a href="birthday.php">[CONZOLE]  >  -TOP SECRET- . PAGE //stripslash 1.4.8.9.84.113.21.74</a></li>
    <li><a href="documents_gate.php">[CONZOLE]  >  -TOP SECRET- . PAGE //stripslash 1.5.8.9.84.113.21.75</a></li>
    <li><a href="birthday.php">[CONZOLE]  >  -TOP SECRET- . PAGE //stripslash 1.6.8.9.84.113.21.76</a></li>
    <li><a href="birthday.php">[CONZOLE]  >  -TOP SECRET- . PAGE //stripslash 1.7.8.9.84.113.21.77</a></li>
    </ul>
</div>    
    
</body>
    <script src="wow.js"></script>
</html>

我只是想，是否有任何可能的方法，使自定义光标，在微软边缘工作？在my website，我使用了这个：

body{ cursor: url(cursor.png), pointer;}

但在微软边缘，它无法正常工作......

任何想法如何解决？/还有其他方法吗？

=============================================== ======================

所以....经过小型重新编码，我的网站看起来像这样，看到小提琴并尝试，它还没有工作......

Answer 1

目前尚不支持此属性：http://caniuse.com/#search=cursor

Answer 2

正如Charaf所说：the property isn't yet supported in Edge。如果您的项目需要解决方案，您可以使用JavaScript模仿行为。

<强> JavaScript的：

if(!CSS.supports('cursor', 'url(cursor.png), pointer')) {
    var myCursor = document.createElement('img');

    myCursor.src = 'cursor.png';
    myCursor.style.position = 'absolute';
    document.body.appendChild(myCursor);

    document.addEventListener('mousemove', function(e) {
        myCursor.style.left = e.pageX+'px';
        myCursor.style.top = e.pageY+'px';
    }, false);
}

Answer 3

我为您创建了一个名为 CursorJS 的库。你可以check it out here。如果您滚动到JavaScript代码的底部，您可以找到初始化代码：

/* Enable lib with cursor image src */
CursorJS.enable('http://files.softicons.com/download/toolbar-icons/plastic-mini-icons-by-deleket/png/32x32/Cursor-01.png');
CursorJS.addEl(document.querySelector('.myElement1'));
CursorJS.addEl(document.querySelector('.myElement3'));

在您的情况下，请执行以下操作：

/* Enable lib with cursor image src */
CursorJS.enable('./cursor.png');
CursorJS.addEl(document.body);

定制

CursorJS有一个mouseOffset变量。它重复了鼠标位置和图像位置的差异。例如，如果我将其设置为

mouseOffset: {
    x: 50,
    y: 50
},

鼠标将关闭50px。我制作这个变量的原因是自定义鼠标有点＆＃34;闪烁＆＃34;，尝试将其设置为 {x：1，y：1} ;）

实例

＆＃13;

var CursorJS = {
	img: new Image(),
	els: [],
	mouseOffset: {
		x: 5,
		y: 5
	},
	addedImg: false,
	checkForIE: function() {
		return (/MSIE/i.test(navigator.userAgent)
				|| /rv:11.0/i.test(navigator.userAgent));
	},
	setDisplay: function() {
		this.img.style.display =
			this.els.indexOf(true) > -1 ? null : 'none';
	},
	getMouseCoords: function(e) {
		var mx = 0, my = 0;
		if (this.checkForIE())
			mx = event.clientX + document.body.scrollLeft,
			my = event.clientY + document.body.scrollTop;
		else
			mx = e.pageX,my = e.pageY;
		if (mx < 0) mx = 0;
		if (my < 0) my = 0;
		return [mx, my];
	},
	mouseOver: function(e, id) {
		this.els[id] = true;
		this.setDisplay();
		var coords = this.getMouseCoords(e);
		this.img.style.left = 
			(coords[0]+this.mouseOffset.x) + 'px';
		this.img.style.top = 
			(coords[1]+this.mouseOffset.y) + 'px';
	},
	mouseOut: function(e, id) {
		this.els[id] = false;
		this.setDisplay();
	},
	mouseMove: function(e) {
		var coords = this.getMouseCoords(e);
		this.img.style.left = 
			(coords[0]+this.mouseOffset.x) + 'px';
		this.img.style.top = 
			(coords[1]+this.mouseOffset.y) + 'px';
	},
	addEvent: function(el, name, func, bool) {
		if (el == null || typeof name != 'string'
				|| typeof func != 'function'
				|| typeof bool != 'boolean')
			return;
		if (el.addEventListener)
			el.addEventListener(name, func, false);
		else if (el.attachEvent)
			el.attachEvent('on' + name, func);
		else
			el['on' + name] = func;
	},
	addEl: function(el) {
		var evts = ['over','out','move'],
			id = this.els.length;
		this.els.push(false);
		this.el = el;
		this.addEvent(el, 'mouseover', function(e) {
			this.mouseOver(e, id) }.bind(this), false);
		this.addEvent(el, 'mouseout', function(e) {
			this.mouseOut(e, id) }.bind(this), false);
		this.addEvent(el, 'mousemove', function(e) {
			this.mouseMove(e) }.bind(this), false);
		if (typeof el['style'] != 'undefined')
			el.style.cursor = 'none';
	},
	enable: function(src) {
		this.img.src = src;
		this.img.style.display = 'none';
		this.img.style.position = 'absolute';
		this.img.style.cursor = 'none';
		this.addEvent(this.img, 'mousemove', function(e) {
			this.mouseMove(e) }.bind(this), false);
		if (!this.addedImg)
			document.body.appendChild(this.img),
			this.addedImg = true;
	}
}

/*** INITIALIZE ***/
CursorJS.enable('http://files.softicons.com/download/toolbar-icons/plastic-mini-icons-by-deleket/png/32x32/Cursor-01.png');
CursorJS.addEl(document.querySelector('.myElement1'));
CursorJS.addEl(document.querySelector('.myElement3'));

＆＃13;

.myElement1, .myElement2, .myElement3 {
	width: 150px;
	height: 150px;
	border: 1px solid gray;
	display: inline-block;
}

＆＃13;

<div class="myElement1">added</div>
<div class="myElement2">not added</div>
<div class="myElement3">added</div>

＆＃13;

希望有效！祝你有愉快的一天：）

边缘不支持自己的光标？

3 个答案:

定制

实例