Question

我有使用css hover的显示/隐藏图标代码：

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>时没有工作。我怎么能解决这个问题？

Answer 1

您的CSS选择器略有错误，请尝试：

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

和

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

选择器部分需要与它们选择的元素嵌套在HTML中的顺序相同。

查看W3C Selectors文档了解更多详情。

Answer 2

>选择器表示直接后代。

在您的标记中，li的直接后代是span.tools。

因此，li > a不会选择任何内容。

但是，li > .tools > a 会选择a元素。

可在此处找到一篇优秀的文章：Child and Sibling Selectors

Answer 3

上面的>选择器是子组合子选择器。这意味着它只会选择父项的直接子元素。换句话说，它只看到标记结构的一个级别，没有更深的。

所以

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

CSS3：在li中显示/隐藏图标

3 个答案: