Question

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

以下是我目前的代码：

CSS：

.SideContainer {
    width: 35%;
    height: 100%;
    text-align: center;

    background-color: #4274aa;
    opacity: 0.6;

}

    .SideContainer h1 {
        color: white;
    }

    .SideContainer a {
        margin: 321px 0 0 0;
    padding: 10px 15px 10px 15px;
    background-color: #05337e;
    color: white;
    display: inline-block;
    }

.LeftSide {
    float: left;
    background-color: blue;
}

    .LeftSide:hover ~ #TLHOOK , .LeftSide:hover ~ #BLHOOK {
    /* Sided box-shadow */
    box-shadow: 6px 0px 10px -7px #111, -6px 0px 10px -7px #111;
    }

HTML：

<section id="ServicesGroup">
    <div class="Centered">
        <!-- Let the magic happen. -->
        <section id="TLHOOK" class="LeftSide SideContainer">
            <div class="TopHeadingShell">
                <img src="~/Shared/Assets/Images/HTML5LogoWithWhiteText.png" />
                <h1>sdsd</h1>
            </div>
        </section>
        <section id="TRHOOK" class="RightSide SideContainer">
            <div class="TopHeadingShell">
                <img src="~/Shared/Assets/Images/GearsIcon.png" />
                <h1>sdsd</h1>
            </div>
        </section>
    </div>
</section>
<section id="ServicesGroupExtended">
    <div class="Centered">
        <!-- Let the magic happen. -->
        <section id="BLHOOK" class="LeftSide SideContainer">
            <a href="~/Shared/Services/sdsd">Packages &amp; Pricing</a>
        </section>
        <section class="Bottom MiddleContainer">
            <h2>
                something here
            </h2>
            <br />
            <a href="~/Shared/About">Learn More</a>
        </section>
        <section id="BRHOOK" class="RightSide SideContainer">
            <a href="~/Shared/Services/sdsd">Packages &amp; Pricing</a>
        </section>
    </div>
</section>

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

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

Answer 1

#TLHOOK不是.Left的兄弟（它是相同的元素）因此~选择器不能在此上下文中使用。

在您的工作示例中，#one，#two和#three是兄弟姐妹。

一般兄弟组合器由“波浪号”（U + 007E，〜）组成分隔两个简单选择器序列的字符。该由两个序列表示的元素共享同一个父元素文档树和第一个序列表示的元素先于（不一定是立即）由...表示的元素第二个。

http://www.w3.org/TR/selectors/

Answer 2

您正在访问元素本身而不是CSS中的兄弟

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

IT应该

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

你也不会看到上面修复后的盒子阴影正如你给出的那样.LeftSide float：left。

所以我给了浮动：右边的.SideContainer并且还增加了框阴影以使框阴影可见。

请参阅fiddle

Answer 3

这是因为您使用的是~ selector。 ~选择器选择前面有当前元素的元素，而在第二个块中，两个元素之间有section。

<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 { ... }

这将选择前一节的前一个#BLHOOK。它非常hacky，但它可以解决问题！

JSFiddle demo

Box Shadow没有工作：悬停，但在其他一个

3 个答案: