Question

我正在尝试为我的网站创建一个小横幅，我发现自己在徘徊时失去了尝试自定义光标。如果我使用内置值，如

cursor:waiting

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

cursor: url(/img/cursor.gif)

它不再起作用了...... 我也尝试使用PNG图像，结果是一样的：只是默认光标.. 我还复制了w3school的属性，但仍然无法使用我的CSS ..（在w3school它也可以使用自定义图像）。在Chrome中，如果我检查元素，则css检查器会显示一个黄色三角形/！\称为'invalid property'，指向cursor：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;
}

Answer 2

我遇到过最好的工作问题，我只是将其上传到图像主机并使用该网址而不是本地网址。

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

2 个答案: