matt matt - 2 months ago 14
HTML Question

Styling the cursor with css

I know it's possible to use an image as the cursor, like this:

.module {
cursor: url('path-to-image.png'), auto;
}


Is it also possible to use a custom div element as the cursor or otherwise customize it with css properties? I'd like to use a triangle as shown here. Is that possible somehow?

How would one go about doing this?

Answer

I looked into this a bit, and while it's impossible to do with CSS, you can actually do this with jQuery.

You create a div and make it follow the cursor while also hiding the "normal" one, hence creating a bit of a cursor. It's a bit of a hack, as it's not actually a cursor, and it may or may not have some compatibility or functional problems.

Anyway, here's the code:

$(document).bind('mousemove', function(e){
    $('#tail').css({
       left:  e.pageX + 1,
       top:   e.pageY
    });
});
#tail {
    position: absolute;
    float: left;
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid green;
}

* {
  cursor: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tail"></div>

<a href="http://google.com">Click me!</a>

I had to offset the cursor by one pixel (e.pageX + 1), otherwise the cursor-div would be directly below the cursor and you'd always be clicking on that instead of the object you actually want to click on.