1

動作しない JSFiddle の例があります: http://jsfiddle.net/bjacobs/KDVvN/28/

要素に、マウスを置いたときに開いた手 (これは機能します) と、マウスをクリックしたときに閉じた手 (これは機能しません) を持たせたいと考えています。

私はJavaScriptで何か間違ったことをしていることを知っています。誰でも助けることができますか？

Javascript:

  $(function () {
    $(".dragbox h2").on("mousedown", function (evt) {
        $(this).addClass('grabbing');
    }).on("mouseup", function (evt) {
        $(this).removeClass('grabbing');
    });
  });

CSS:

.dragbox {
    margin:0px 2px 2px;
    background:#fff;
    position:relative;
}
.dragbox h2 {
    font-size:15px;
    cursor: grab;
    cursor:-webkit-grab;
    cursor:-moz-grab;
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
.dragbox h2.grabbing {
    cursor: grabbing;
    cursor:-webkit-grabbing;
    cursor:-moz-grabbing;
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}
4

3 に答える 3

1

テキスト要素では機能しない場合があります。ボタンを試してください（ただし、機能させるにはドラッグを開始する必要があります）：

html/cssだけでこれを行うことができます

デモはこちら: http://jsfiddle.net/KDVvN/37/

HTML

<button>Test Grab!</button>

CSS

button {
    font-size:15px;
    cursor: grab;
    cursor:-webkit-grab;
    cursor:-moz-grab;
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
button:active {
    cursor: grabbing;
    cursor:-webkit-grabbing;
    cursor:-moz-grabbing;
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}

またはJS

デモはこちら: ( http://jsfiddle.net/KDVvN/36/ )

HTML

<button>Test Grab!</button>

CSS

button {
    font-size:15px;
    cursor: grab;
    cursor:-webkit-grab;
    cursor:-moz-grab;
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
button.grabbing {
    cursor: grabbing;
    cursor:-webkit-grabbing;
    cursor:-moz-grabbing;
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}

JS

$("button").on("mousedown", function (evt) {
    $(this).addClass('grabbing');
}).on("mouseup", function (evt) {
    $(this).removeClass('grabbing');
});
于 2013-01-29T00:43:37.630 に答える
1


この記事を読んでください:
http://www.sitepoint.com/css3-cursor-styles/


「.column .dragbox h2.grabbing」の「,」を見落としているかもしれません

Webkit ブラウザーのみがグラブ ハンドをサポートします。しかし、これを同様の方法で使用しようとすると、ブラウザーがオーバーライドするため、グラブ中に閉じた手のカーソルを作成できないことに気付きました。

于 2013-01-28T23:45:56.540 に答える
0

問題はJavaScriptにありません。

コードを正確にコピーして独自のテストページを作成すると、機能します。

スタイル「グラブ」が追加され、<h2>要素から削除されます。

FireBugでスタイルが追加および削除されているのがわかります。

問題は、カーソルが変わらないことです。

これにより、次の2つのいずれかが正しいと思います。

  1. あなたのCSSは正しくありません
  2. これらのカーソルスタイルは<h2>要素に適用できません（または、マウスがテキストの上にある場合は適用できません）

デバッガーを開いてみてください。おそらく同じことが表示されます。

私の推測では、特定のカーソルは特定のブラウザの特定の場所でのみ機能します...

たぶん、あなたはあなたが見ているものを説明するこれらの記事の1つで何かを見つけるでしょう：

于 2013-01-29T00:24:31.067 に答える