使用有序列表時，如何僅將樣式應用於懸停列表項目，而不是父項目？

參考：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中 - 它適用懸停狀態父也。我只想將樣式應用於當前懸停的元素。

我該如何做到這一點？

來源

2014-03-25 Barry Chapman

您應該包括在問題本身相關的HTML代碼。 Jsfiddle僅僅是一個有用的額外功能，並不能代替它自己無法解決的問題。 –

選擇更改爲

.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）

來源

2014-03-25 06:20:24

乾杯 - 這將工作。這也是很好的帳戶的拖動柄，但這會做伎倆。謝謝！ –

@BarryChapman也加入了支持... –

的目標，通過類的特定李（或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; 
}

來源

2014-03-25 06:35:17 belotte

使用有序列表時，如何僅將樣式應用於懸停列表項目，而不是父項目？

回答

相關問題