Customize cursor with css

Asked

Viewed 253 times

2

I would like to know how I change the cursor, putting an image I want, is possible ?

I’ve tried to do it this way:

CSS?

#esquerda{
    width: 400px;
    height: 600px;
    border: 2px solid red;
    cursor: url(imagens/cursor-154478__180.png);
}

but nothing happens, but if I change the part of the url on to a crosshair they work, someone could help me?

css

  • The url needs to use single quotes. cursor: url('imagens/cursor-154478__180.png');

  • In a precise no.

  • In function url you should use quotes and start the value with a/, indicating the root folder. Example: cursor: url('/imagens/cursor-154478__180.png');

1 answer

4

you need to define which cursor will receive the image

#esquerda{
    width: 200px;
    height: 200px;
    border: 2px solid red;
    cursor: url(http://i225.photobucket.com/albums/dd43/erickson_29/basic.gif), auto;
}
<div id="esquerda"></div>

These are all the cursors options you have:

auto            
default         
none            
context-menu    
help            
pointer         
progress        
wait            
cell            
crosshair       
text            
vertical-text   
alias           
copy            
move            
no-drop         
not-allowed     
all-scroll      
col-resize      
row-resize      
n-resize        
e-resize        
s-resize        
w-resize        
ns-resize       
ew-resize       
ne-resize       
nw-resize       
se-resize       
sw-resize       
nesw-resize     
nwse-resize

  • Thank you very much, you helped me a lot !!

  • 1

    Mark as certain, just click on the "V" below the score, this will help other people looking for a question like this to know what was the answer that solved your problem and even lambuja encourages who help you giving him reputation. :D

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.