CSS

2016-09-12 9 views
1

でカーソルをスタイリング私はそれがこのように、カーソルとして画像を使用することが可能です知っています?私はhereのように三角形を使用したいと思います。どういうわけか可能ですか?CSS

これを行うにはどうすればいいですか?

+0

私は従いません。この矢は何ですか?どのような視覚的な例がありますか? – Chris

+0

このようなもの:https://css-tricks.com/snippets/css/css-triangle/私はちょうどイメージを経由せずにCSSを介して行われる純粋なCSSアイコンについて話しています。そして私はこのアイコンをcusorとして適用したいと思います。 – matt

+0

カーソルをどのように見せたいのですか?ちょうど三角形? – Chris

答えて

0

これを少し調べましたが、CSSで行うことは不可能ですが、実際にはjQueryを使用してこれを行うことができます。

divを作成してそれをカーソルに追従させ、「通常の」ものを隠しながらカーソルを作成します。実際にはカーソルではないので、ちょっとしたハックだし、互換性や機能上の問題があるかもしれません。

はとにかく、ここにコードがある:

$(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>

「私は、一つの画素(e.pageX + 1)でカーソルを相殺しなければならなかったそうカーソル-divが直接カーソルを下回るだろうとあなた実際にクリックしたいオブジェクトではなく、常にそのオブジェクトをクリックしています。

+0

ありがとう、クリス。私のアイコンの例でそれを試してください。私にとって、これは実際には遅れがちです。これを見てください:http://jsfiddle.net/vbvng3z0/4/ – matt

+0

確かに、ここに行きます:http://jsfiddle.net/vbvng3z0/5/ – Chris

+0

マイナーチェンジ:http://jsfiddle.net/vbvng3z0/6 /私はオフセットを変更して、その中心ではなく、矢印の先端で「クリック」が起こるようにしました。 – Chris