在悬停父母时显示孩子不起作用

Question

我已将我的代码放入jsFiddle，因为我无法使用较小的示例重现它。

我有一些菜单项在悬停时显示其子菜单。我想添加一个标题，该标题也应该在悬停时显示，但css类似乎不起作用。

这是规则，它在小提琴的第60行：

li:hover > .skimap-control-title {
  display: block;
}

有趣的是，如果我在开发人员工具中添加完全相同的规则，它会突然发挥作用。

我希望有人可以帮助我。

Answer 1

我认为问题在于一些语法/格式错误。我无法缩小范围，但是当你在JSFiddle中单击“Tidy Up”时，它似乎按预期工作。查看更新的fiddle

另外，为什么你有<ul></ul>？这些空标签有什么意义？

Answer 2

由于@cocoa

，我能够修复它

我刚刚在我的小提琴中使用“Tidy up”后复制了规则并替换了我的css文件中的规则并且它有效。

奇怪的是，在git diff中，两条线看起来完全一样。

我不知道这里的区别是什么，但它确实有效。

Answer 3

在不知道你的代码的情况下，我们只能猜测。

但是这里是一个关于父母处于悬停状态时如何显示孩子的例子：

<div class="outer">
  <div class="show-on-hover">Hello there!</div>
</div>

这是CSS：

.outer {
  width: 150px;
  height: 150px;
  display: block;
  border: 1px solid green;
}

.show-on-hover {
  display: none;
}

.outer:hover {
  background: #ccf;
}

.outer:hover .show-on-hover {
  display: block;
}

这是一个工作小提琴：http://jsfiddle.net/an5v2atn/1/