Styling die Cursor mit CSS

Question

Ich weiß, es ist möglich, ein Bild als Cursor, wie diese zu verwenden:

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

Ist es auch möglich, ein benutzerdefinierte div-Element als Cursor zu verwenden oder auf andere Weise anpassen es mit CSS-Eigenschaften ? Ich würde gerne ein Dreieck wie gezeigt here verwenden. Ist das irgendwie möglich?

Wie würde man das machen?

Answer 1

Ich habe ein wenig nachgeschaut, und obwohl es mit CSS nicht möglich ist, können Sie das mit jQuery machen.

Sie erstellen ein div und machen es dem Cursor folgen, während auch die "normale" ausblenden, damit ein bisschen ein Cursor erstellen. Es ist ein bisschen wie ein Hack, da es nicht wirklich ein Cursor ist, und es kann einige Kompatibilitätsprobleme oder funktionelle Probleme haben.

Wie auch immer, hier ist der 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>

ich unter dem Cursor und Sie würden direkt hatte, um den Cursor um ein Pixel (e.pageX + 1), andernfalls wird der Cursor-div Offset‘ d Klicken Sie immer auf das statt auf das Objekt, auf das Sie tatsächlich klicken möchten.