3

選択したテキストの上にマウスが移動したときに、カーソルの種類を変更する必要があります。

ここに説明画像があります：

必要なカーソルの種類を説明する画像 http://img190.imageshack.us/img190/1786/72162829.png

この例では、ユーザーはテキストをテキストエリアにドラッグする必要があります。従来のポインターは直感的ではないため、「移動」ポインター (カーソル:ポインター) を使用したいと思います。この画像はフォトショップで作りました。HTML / CSS / JAVASCRIPT で実際に作成する方法を知っている人はいますか?

4

4 に答える 4

3

選択スタイル(IE ではサポートされていません) は、目的の効果を達成するために頭に浮かぶ唯一のものです。

::selection {
    color: red;
    cursor: move;   
}

::-moz-selection {
    color: red;
    cursor: move;
}

...しかし、テキストは赤くなりますが (これは単なるコントロールです)、カーソルは Safari でも Firefox でも変わらないようです。ただし、HTML 要素でテキストをラップし、(ID またはクラスを介して) スタイルを要素に適用すると、すべて正常に機能します。

window.getSelection()JavaScript の方法を使用して、選択したテキストを DOM 要素でラップし、この DOM 要素のスタイルを設定することで、この問題を回避できる場合があります。ただし、これが可能かどうかはわかりません (少しハックかもしれません)。

于 2009-09-29T09:20:43.563 に答える
0

Tzury Bar Yochay が示しているように、これは CSS と JavaScript の両方で行うことができます。

CSS - cursorstyle プロパティを使用します。これは、いくつかの標準値(推奨) または独自のカーソル ファイル (ただし、標準値の 1 つを使用したフォールバックを常に含む) のいずれかです。これは、「クリック可能な」クラスを持つ要素のカーソルを、クリックできるものの標準カーソルに変更する例です。

.clickable {
  cursor: pointer;
}

(これは、スタイルシート ファイル、または[何らかの理由で別のファイルを使用できない場合] ドキュメントのstyle要素内に表示される必要があります。) その後、そのクラスを関連する要素に適用できます。head

JavaScript -style要素のプロパティは CSS スタイルを公開するため、次のことができます。

var element = document.getElementById('someid');
element.style.cursor = 'pointer';

...私は通常、要素のclassNameプロパティ (スペースで区切られた要素のクラスのリスト) を介してクラス名を追加/削除することによってそれを行うことを好みます:

var element = document.getElementById('someid');
element.className += " clickable";
于 2009-09-29T08:55:21.110 に答える
-2

CSS

<style type="text/css">
    body{
    cursor: url(mycursor.cur)
}
</style>

JavaScript

document.body.style.cursor = 'wait';
于 2009-09-29T08:43:03.820 に答える