0

我有一个可排序的 .column 类元素。我在该列中有两个 id：

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

我希望鼠标悬停时有一只张开的手，仅在 column1 上拖动时有一只闭合的手。如果我的 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

因为您要指定具有“ui-sortable”类的id为“#column1”的元素，而不是“#column1”的子类“ui-sortable”的任何元素。

由于下面的讨论，我添加了一些关于 CSS 类和元素的基本信息：

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

这个元素有一个 ID 'column1'，你在 CSS 中通过 # 符号 + IDname 引用一个 ID，所以在本例中是 '#column1'。这个元素也有两个类'column'和'ui-sortable'。在您的情况下，您只想将 CSS 规则应用于此特定元素。您可以使用 ID-Selector 进行简单操作：

#column1 { }

在您的问题中，您使用了：

#column1 .ui-sortable { }

这将被解释为通过 ID '#column1' 和该父级的所有嵌套元素（具有类 'ui-sortable' ）查找元素。不匹配 - 因为 Element 本身有类，而不是子类。如果删除 CSS-Selector 的空格：

#column1.ui-sortable { }

它被解释为通过 ID '#column1' 找到一个具有类 'ui-sortable' 的元素这可能有点过重，因为 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 回答