什么是非直接和先例兄弟的CSS选择器？

Question

我有一个看起来像这样的DOM树（让我们说这些是类名）：

• 容器
  • my_label
  • my_span
  • my_sub容器

在hover的{​​{1}}上，会显示container。选择器为my_label

如果.container:hover .my_label也在my_label，我想添加其他规则以隐藏my_sub-container。

如果hover 不我的标签的先例或直接兄弟，如何将样式应用于my_label？

Answer 1

仅CSS不能实现此类功能，因为CSS没有向后选择器。您想要使用JavaScript / jQuery。请查看.hover()和show() / hide()或fadeIn() / fadeOut()。

Answer 2

可悲的是，正如Pauli_D所说，你将无法用CSS做到这一点，因为它不能在HTML中看起来“向上”，只能向下和向内看。

这样做的一种方法是添加一些jQuery，然后告诉我应该做什么。在我的小提琴中，我添加了一个.hover()来切换一个类并使div透明。 Check it out here

<强>的jQuery

$(".my_sub-container").hover(function(){ //when hovered
    $('.my_label').toggleClass('hidden'); //do this
});

当然，如果你还没有将jQuery添加到你的页面，不要纯粹为这个函数做，而是使用vanilla Javascript来做同样的事情。它还需要几行，但是它可以为这样简单的东西添加一个库：D