html - 使用有序列表时，如何将样式仅应用于悬停的列表项，而不应用于父项？

Question

供引用:http://jsfiddle.net/47ZLM/

我试图用这个来纠正它:

.delete-element-node {
    visibility: hidden !important;
    color: #900;
    float: right;
}

.dd .dd-item:hover > .dd3-content > span.delete-element-node {
    visibility: visible !important;
}

当您悬停元素 16,17 或 18 时 - 它也会将悬停状态应用于父项。我只想将样式应用于当前悬停的元素。

我将如何完成这个？

Answer 1

将选择器更改为

.dd .dd-item > .dd3-content:hover > span.delete-element-node {
    visibility: visible !important;
}

Demo

它也显示在父元素上，因为您定位的是错误的 .dd-item，您应该定位元素本身。

---

正如您评论的那样，将您的选择器修改为

.dd .dd-item > .dd3-content:hover > span.delete-element-node,
.dd .dd-item > .dd-handle.dd3-handle:hover + .dd3-content span.delete-element-node {
    visibility: visible !important;
}

Demo 2 (将在拖动器悬停时显示 x)