CSS：悬停和：内部元素

Question

我正在使用jQueryUI构建一个可排序列表，当用户将鼠标悬停在列表项上时，我想提供一组选项（编辑，删除等） - 到目前为止一切正常。

我遇到问题的一点是，当列表项变为活动状态时（在用户尝试将其移动到新位置之前），我希望选项消失。

我有点工作，但我不能再点击按钮 - 当我点击按钮时，列表项变为活动状态并隐藏选项。

我认为这可能是个问题：

    .script-item:active .scriptItemOptions {
        display: none;
    }

我能以正确的方式解决这个问题吗？

Example JSFiddle

Answer 1

这个规则是你的问题，是的。 :active伪类指的是用户单击元素的确切时刻。因此，当用户尝试点击您的元素时，隐藏.scriptItemOptions。

但是当您点击scriptItemOptions时，script-item也是有效的！因为scriptItemOptions是script-item

的孩子

我编辑了你的jsfiddle：http://jsfiddle.net/59uhw3j6/2/ 您现在可以单击该按钮。我刚刚添加了这条规则：

.script-item:active .scriptItemOptions:active {
  display: block;
}

Answer 2

您只需要使用!important

覆盖它

.script-item:active .scriptItemOptions {
    display: none !important;
}

<强> See the Demo