Customize cursor with css

Question

Customize cursor with css

Navigation

#1 by (3 votes)

2

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

I have tried to do this as follows:

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 it works, could anyone help me?

css

asked by anonymous 22.08.2015 / 02:45

1 answer

How to empty PHP buffer during execution What are the valid delimiters for preg_ regular expressions?

score 3 · Answer 1

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 cursor 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