CSS3：鋰顯示/隱藏圖標

我使用CSS懸停有顯示/隱藏圖標驗證碼：CSS3：鋰顯示/隱藏圖標

HTML：

<li> 
    <span class="tools"><a href="javascript:void()"><i alt="Delete" title="Delete" class="icon-remove-sign" onclick=deleteBox("1")></i></a></span> 
</li>

CSS：

.box .todo-list > li> a> .tools { 
    display: none; 
    float: right; 
    color: #f56954; 
} 
.box .todo-list > li> a:hover .tools { 
    display: inline-block; 

}

現在這不工作，而不是隱藏我的圖標。如果我從代碼中刪除> a>這工作和隱藏，但當添加a>不起作用。我該如何解決這個問題？

來源

2014-06-21 user27133

可以添加您的deleteBox（） – Pogrindis

「如果我刪除'> A>'從這個代碼工作」然後你就可以刪除它解決它？ – Unihedron

你的CSS選擇器是稍有不妥，請嘗試：

.box .todo-list > li > .tools > a

而且

.box .todo-list > li > .tools > a:hover

的選擇部分需要在相同的順序，他們選擇嵌套在HTML元素中去。

查看W3C Selectors文檔瞭解更多詳情。

來源

2014-06-21 13:45:11

我需要在li中顯示/隱藏不在a中。這爲我工作：'.box .todo-list> li：hover> .tools> a' – user27133

>選擇器意味着立即後代。

在您的標記中，li的的後裔是span.tools。

因此，li > a不會選擇任何內容。

但是，li > .tools > a確實選擇a元素。

一個優秀的記錄可以在這裏找到：Child and Sibling Selectors

來源

2014-06-21 13:46:22

以上>選擇爲孩子選擇組合子。這意味着它只會選擇父母的直接子女的元素。換句話說，它只能看到標記結構的一個級別，而不是更深。

所以

.box .todo-list > li > .tools > a

來源

2014-06-21 13:47:23 4dgaurav

CSS3：鋰顯示/隱藏圖標

回答

相關問題