Html 使用：hover，：focus在悬停类之外更改另一个css

我有一个css类，它们都是同级的：

flex align

和

nav下拉列表

当我将鼠标悬停在

flex align

上时，导航下拉列表会发生变化

.flex-align:hover ~ .nav-dropdown {
   display: block !important;
}

问题: 我想要的是，它只在我

悬停

或

焦点

图标时发生变化，该图标是

柔性对齐

的子图标，这是

导航下拉列表

唯一发生变化的时间

多谢各位

.flex align{
显示器：flex；
证明内容：开始；
对齐项目：居中；
}
.导航下拉列表{
显示：无；
宽度：自动；
}
.flex align i:悬停~.nav下拉列表{
显示：块；
}

主要测试

由于您无法在CSS中选择父元素（等待可能的CSSv4解决方案），因此请使用JS。悬停时将类添加到父元素

$（文档）.ready（函数（）{
$（'.flex align i'）。悬停(
函数（）{
$（this）.closest（'.parent wrapper'）.addClass（'hover'）；
},
函数（）{
$（this）.closest（'.parent wrapper'）.removeClass（'hover'）；
}
)
});
.flex align{
显示器：flex；
证明内容：开始；
对齐项目：居中；
}
.导航下拉列表{
显示：无！重要；
宽度：自动！重要；
}
.悬停.导航下拉列表{
显示：块！重要；
}

主要测试






您可以使用CSS属性确保图标将悬停事件发送给其父图标，但文本不会：


.flex align{
显示器：flex；
证明内容：开始；
指针事件：无；
}
.flex align i{
指针事件：自动；
}
.导航下拉列表{
显示：无；
}
.flex align:hover~.nav下拉列表{
显示：块；
}

主要测试




CSS无法选择父类，因此您应该将
.nav下拉列表
移动到
内部。flex align
或使用js，悬停时将类添加到
.flex align
，然后您可以选择
.nav下拉列表
，这是我的想法。我只是问是否有一种方法可以改变css类，它不是悬停类的兄弟或子类。这是不可能的。查看此处？使用定位将
移动到
.flex align
外部，并设置
指针事件：无
。这将确保它不会将悬停事件发送到其父级。。。然后设置
.flex align:hover~。。。{}
规则。谢谢你，伙计。我只是问有没有一种没有JS的方法。我现在明白了，这是不可能的。JS它是。@StacksQueue与当前的html-否。但我认为你可以想出聪明的html结构，允许你选择ElementsWoow。多好的回答啊。多谢各位