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

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）

Answer 2

的目标，通过类的特定李（或id）父母。

HTML: 
<ul class="element-node"> 
    <li> xxx </li> 
</ul> 

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

，为绳拉目标同里，以同样的方式：

CSS: 
.element-node li:hover { 
    visibility: visible !important; 
}