Search code examples
csscross-browsercursorgifanimated-gif

Custom cursor:url(/img/cursor.gif) marked as invalid property

I'm trying to create a little banner for my site and I found myself lost trying to customize the cursor when hovering it. If I use a built-in value like 

cursor:waiting

it works, but if I change it to 

cursor: url(/img/cursor.gif)

it doesn't work anymore... I tried also with a PNG image and the result has been the same: just the default cursor.. I copied also the property from w3school and still doesn't work with my CSS.. (In w3school it worked also with custom images). In Chrome if I inspect the element the css inspector shows a yellow triangle /!\ saying 'invalid property' referred to cursor: url(/img/cursor.gif).

The path should be correct, I also copied the cursor.gif in the same folder of the CSS and still doesn't work.. Where is the problem? Thank you in advance to everybody!

Solution

  • After many hacks I discovered that the size was too high to be displayed. Now it works, but it is not animated.. Searching if another file format could solve, I found this. It seems that the way in which I am is going nowhere..

    The working (but not animating) code is 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;
}