jQuery UI Droppable中activeClass与hoverClass不生效问题排查

核心问题：CSS选择器优先级不足 #

你的#area2是ID选择器，权重远高于.startmoving、.reached这类普通类选择器。即使jQuery UI成功给#area2添加了这两个类，类里的背景样式也会被ID选择器的权重压制，导致无法生效。

解决方法 #

提升类选择器的权重，让其能覆盖ID选择器的样式优先级。修改你的CSS代码，将.startmoving和.reached改为结合ID的选择器：

#main {
    float: left;
}

.sub {
    width: 100px;
    height: 100px;
    border: 2px solid black;
    margin: 5px;
}

#area1, #area2{
    width: 400px;
    height: 400px;
    border: 3px solid goldenrod;
    margin: 5px 20px;
    float: left;
}

/* 修改这里，结合ID提升权重 */
#area2.startmoving {
    background: darksalmon;
}

#area2.reached {
    background-color: darkorange;
}

额外说明 #

• 不需要额外添加.ui-droppable相关的复合选择器，直接通过ID+类的组合就能获得足够高的权重。
• 你的drop函数使用$(this).css("background", "gray")是行内样式，权重最高，会覆盖所有类样式，这部分是正常的，和hover/active状态不冲突。

内容的提问来源于stack exchange，提问作者hassan