jquery - CSS :hover and :active with internal element

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;
}