Html Boxshadow不工作：悬停，但在另一个

当我将鼠标悬停在另一个div上时，我无法让这些div显示框阴影。我在Jsfiddle中使用了它，但是当应用到这些div时，它不起作用，我不知道为什么。我已经包括了原始（工作）JSFIDLE和这个（非工作版本）用于比较。我不明白为什么它不起作用，因为唯一的区别是它们有不同的类名和id名

以下是我目前的代码：

CSS:

HTML:

sdsd
sdsd
这里有东西

---

这是JSFiddle和（我需要使用的）一个。请不要介意上一个示例中的定位-只要将鼠标悬停在您看到的第一个div上，您就会看到它在我链接的第二个示例中不起作用

为什么这不能像预期的那样工作？我的意思是，唯一不同的是类名和id名已经改变了，就像我认为它会起作用一样？

\TLHOOK

不是

的兄弟。Left

（它是同一个元素）因此

~

选择器不能在这个上下文中使用

在您的工作示例中，

#一

、

#二

和

#三

是兄弟姐妹

一般同级组合器由“tilde”（U+007E，~）组成 分隔两个简单选择器序列的字符。这个 由两个序列表示的元素在 文档树和由第一个序列表示的元素 在由 第二个

---

您访问的是元素本身，而不是CSS中的同级元素

.LeftSide:hover ~ #TLHOOK , .LeftSide:hover ~ #BLHOOK 

应该是

.LeftSide:hover ~ #TRHOOK , .LeftSide:hover ~ #BRHOOK {

此外，在上述修复之后，您也不会看到框阴影在工作。LeftSide float:left

所以我给了float:right to.SideContainer，还增加了框阴影，只是为了让框阴影可见

---

请参见

这是因为您正在使用。

~

选择器选择当前元素前面的元素，在第二个块中，两个元素之间有一个

部分

<section id="TLHOOK"> <!-- This doesn't precede anything -->
<section id="TRHOOK"> <!-- This precedes TLHOOK -->

<section id="BLHOOK"> <!-- This doesn't precede anything -->
<section class="MiddleContainer">
<section id="BRHOOK"> <!-- This precedes MiddleContainer, not BLHOOK -->

这将选择前一节的前一个#BLHOOK。这是相当骇客，但它做的把戏


.LeftSide:hover ~ #TRHOOK , .LeftSide:hover ~ #BRHOOK {

<section id="TLHOOK"> <!-- This doesn't precede anything -->
<section id="TRHOOK"> <!-- This precedes TLHOOK -->

<section id="BLHOOK"> <!-- This doesn't precede anything -->
<section class="MiddleContainer">
<section id="BRHOOK"> <!-- This precedes MiddleContainer, not BLHOOK -->

..., .LeftSide:hover ~ section ~ #BRHOOK { ... }