用于显示子体的CSS选择器'；我不能正常工作

我的html是（仅标题）

我创建了一个类似的标签，并添加了颜色来解释这种情况

蓝色（

#msg#header_side

）是一个带有选项的部分，当鼠标悬停在黄色（

.msg#header

）的任何部分时，应该显示这些选项 问题是，只有当鼠标光标位于黄色时，当前选择器（我能做的最好的选择）才会显示蓝色

像这样（屏幕截图没有捕获鼠标光标-它在黄色上）：

当光标位于红色（

#侧

）时，蓝色消失

像这样（屏幕截图没有捕捉到鼠标光标-它在红色上）：

我的选择器是

.media。未读：hover+#side#msg#u header_side

我如何理解它是“一类媒体，悬停时未读，并与msg_header_side作为子级将具有可见性：可见”。 工作不太好。

我不确定“+”号，但这应该会解决一些问题：

.media.unread:hover,
#side  #msg_header_side{
visibility: visible;
}

---

您需要添加一个额外的选择器来匹配

#msg#header(u side

，作为

#side:hover

.media.unread:hover + #side #msg_header_side, #side:hover #msg_header_side

---

希望这就是你想要的。

我不太确定你想要达到什么目标，但我认为你想要元素1，它有黄色背景，元素2，它有红色背景，如果你将它们都悬停，应该会出现元素3，它有蓝色。首先，你应该意识到你的黄色元素并没有包围红色元素因为它们是同级元素，所以堆叠顺序告诉我们，红色元素通常位于其上一个同级元素的顶部，该同级元素必须为黄色。输入红色元素后，您将保留黄色元素和选择器：

原件：

告诉浏览器显示带有#msg#u header#side（蓝色）id的元素，如果#side（红色）与class.media.unread（黄色）处于悬停状态，则该元素必须是#side（红色）元素的子元素

如果红色元素也处于悬停状态，则要告诉浏览器显示该元素，必须在第一行中附加代码，并按如下所示进行更改：

更改：

正如你们看到的，只有第一行被修改了

---

另外，我为我写的乱七八糟的东西感到抱歉：）你也可以重新考虑你的选择器命名，有这么多的类和ID，肯定会更好。

.media.unread:hover+#side#msg#header#u side

匹配

msg#header#u side

的descandant，前面紧跟着一个兄弟

.media.unread:hover

根据。这不是你给出的定义。那么有没有办法修复选择器？不，那完全错了。逗号指定第二部分是一个单独的选择器。这根本不是OP想要的。这很接近，但也可以做到#side:hover显示#msg#header#side。我需要显示蓝色（在JSFIDLE上）在黄色和红色上。您的解决方案给出黄色或红色。@Foxedd-As#side不是.media的描述标准。media lose：当光标位于#side时，悬停状态。将#side放入.media将解决您的问题。

.media.unread:hover,
#side  #msg_header_side{
visibility: visible;
}

.media.unread:hover + #side #msg_header_side, #side:hover #msg_header_side

.media.unread:hover + #side  #msg_header_side {
    visibility: visible;
}

.media.unread:hover + #side  #msg_header_side, #side:hover  #msg_header_side {
    visibility: visible;
}