カーソルを変更しようとしています
ドラッグ可能なスクロール可能な画像を作成しようとしているので、変数がズームモードに設定されているときに画像上でカーソルを変更しようとしているので、使い勝手がよくなります。私が見つけたのは、「。page」をクリックしてから、ページをクリックしたときと同じようにマウスを動かした場合にのみ、カーソルが変化することです。次にいくつかのサンプルコードを示します。
$(".page").on("mousedown", function (evt) {
if(model.zoomMode){
$('.page').css('cursor','url("img/hand_closed.gif"),auto');
}
}).on("mouseup", function (evt) {
if(model.zoomMode){
$('.page').css('cursor','url("img/hand_open.gif"),auto');
}
});
CSSにさらに依存する別のアプローチ
これは、クラスを使用して同じ効果を達成するときにも発生するようです。すなわち。ズームモードでは、.pageオブジェクトの外部にクラスが追加され、JavaScriptは次のようになります。
$(".page").on("mousedown", function (evt) {
$('.page').addClass('mouseDown');
}).on("mouseup", function (evt) {
$('.page').removeClass('mouseDown');
});
次にCSSで：
.zoom .page:hover{
cursor:url(../img/hand_open.gif),auto;
}
.zoom .page.mouseDown:hover{
cursor:url(../img/hand_closed.gif),auto;
}
テストにはChrome18を使用しています。マウスを動かさずに適用されているCSSカーソルをトリガーする方法を知っている人はいますか？