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

Question

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

这样的内置值

cursor:waiting 

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

cursor: url(/img/cursor.gif)

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

路径应该是正确的，我也复制了 cursor.gif 到 CSS 的同一个文件夹中，但仍然不起作用..问题在哪里？提前谢谢大家!

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;
}