0

ソート可能な .column クラス要素があります。その列には2つのIDがあります：

<div id="column1" class="column ui-sortable">
<div id="column2" class="column ui-sortable">

マウスオーバーしたときに開いた手があり、列1のみにドラッグしたときに閉じた手が必要です。私のCSSが次のようになっている場合：

.ui-sortable{
    cursor: grab;
    cursor:-webkit-grab;
    cursor:-moz-grab;
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
#column1 .ui-sortable-helper{
    cursor: grabbing;
    cursor:-webkit-grabbing;
    cursor:-moz-grabbing;
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}

次に、開いた手が column1 と column2 に表示され、閉じた手がドラッグされている column1 に表示されます。しかし、私は column1 でオープン ハンドのみが必要なので、次のことを試しました。

#column1 .ui-sortable{
    cursor: grab;
    cursor:-webkit-grab;
    cursor:-moz-grab;
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}

しかし、これは column1 には何もしません。デフォルトのカーソルを取得します。ID の追加が .ui-sortable-helper では機能するのに、ui-sortable では機能しないのはなぜですか? 開いた手を column1 だけに表示するにはどうすればよいですか?

ありがとうございました！

4

1 に答える 1

0

必要な CSS ルールは次のとおりです。

#column1.ui-sortable

'#column1' の子であるクラス 'ui-sortable' を持つ要素ではなく、クラス'ui- sortable' を持つID '#column1' を持つ要素を指定するためです。

以下の議論のために、CSS のクラスと要素に関するいくつかの基本的な情報を追加します。

<div id="column1" class="column ui-sortable">

この要素には 1 つの ID「column1」があり、CSS で # 記号 + ID 名を介して ID を参照するため、この場合は「#column1」です。この要素には、「column」と「ui-sortable」の 2 つのクラスもあります。あなたのケースでは、この特定の要素にのみ CSS ルールを適用したいと考えていました。ID-Selector を使用してできること:

#column1 { }

あなたの質問では、次を使用しました：

#column1 .ui-sortable { }

これは、ID '#column1' で要素を検索し、クラス 'ui-sortable' を持つこの親のすべてのネストされた要素を検索すると解釈されます。一致しません - Element 自体が子ではなくクラスを持っているためです。スペースを削除すると、CSS-Selector:

#column1.ui-sortable { }

クラス「ui-sortable」を持つID「#column1」で要素を検索すると解釈されます。IDは一意である必要があるため、これは少し過大評価される可能性がありますが、問題は解決しました。クラス「ui-sortable-helper」を持つ要素は div#column1 の子であるため、ここにスペースが必要です。

<div id="column1" class="column ui-sortable">
    <div class="ui-sortable-helper">
    </div>
</div>

したがって、セレクターにはスペースが必要です。

#column1 .ui-sortable-helper { }
于 2013-01-29T06:04:03.287 に答える