自定义光标：url(/img/cursor.gif) 标记为无效属性

Question

我正在尝试为我的网站创建一个小横幅，但我发现自己在悬停时无法自定义光标。如果我使用像

这样的内置值

cursor:waiting 

它有效，但如果我将其更改为

cursor: url(/img/cursor.gif)

它不再起作用了...... 我也尝试使用 PNG 图像，结果是一样的：只是默认光标.. 我还从 w3school 复制了该属性，但仍然无法与我的 CSS 一起使用。（在 w3school 中，它也适用于自定义图像）。在 Chrome 中，如果我检查元素，css 检查器会显示一个黄色三角形 /!\ 表示“无效属性”引用光标：url(/img/cursor.gif)。

路径应该是正确的，我也复制了css同一个文件夹下的cursor.gif，还是不行。。问题出在哪里？ 提前谢谢大家！

Answer 1

经过多次修改后，我发现尺寸太大而无法显示。现在它可以工作了，但它不是动画的。搜索是否可以解决另一种文件格式，我找到了this。看来我的路走不通了..

工作（但不是动画）代码是here。

HTML

<div id="amiciCuccioliAd">

    <img class="adTitle" src="http://www.sardegnaannunci.com/amiciCuccioliAd/img/adTitle.png">
    <img class="pets" src="http://www.sardegnaannunci.com/amiciCuccioliAd/img/pets.png">



</div>

CSS

#amiciCuccioliAd{
height:140px;
width:250px;
background-color:red;
border:0px;
padding:0px;
margin:0px; 
cursor:url(http://www.sardegnaannunci.com/amiciCuccioliAd/cursor.gif), wait; 
}

/*Questo è per cambiare il cursore sul #amiciCuccioliAd*/
#amiciCuccioliAd:hover { 
cursor:url(http://www.sardegnaannunci.com/amiciCuccioliAd/cursor.gif), wait; 
}

/*Questo casino è per mettere un'immagine al centro!*/
#amiciCuccioliAd > .adTitle{
display:block;
width:237px;
height:35px;
margin-left:auto;
margin-right:auto;
padding-top:5px;
}

#amiciCuccioliAd > .pets{
display:block;
float:left;
padding-left:4px;
}

Answer 2

我遇到的最佳解决方法是将其上传到图像主机并使用该网址而不是本地网址。