0

当我将鼠标悬停在另一个 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>

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

为什么这没有按预期工作？我的意思是，唯一不同的是类名和 id 名发生了变化，就像，我认为它会起作用？

4

3 回答 3

2

#TLHOOK不是.Left（它是同一个元素）的兄弟，因此~选择器不能在这种情况下使用。

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

通用兄弟组合符由分隔两个简单选择器序列的“波浪号”（U+007E，~）字符组成。由两个序列表示的元素在文档树中共享相同的父元素，并且由第一个序列表示的元素在（不一定立即）由第二个序列表示的元素之前。

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

于 2013-05-22T11:55:13.690 回答
0

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

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

它应该是

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

此外，在上述修复之后，您不会看到 box-shadow 工作，因为您已经给出了 .LeftSide float:left。

所以我给了 float: right 给 .SideContainer 并且还增加了盒子阴影只是为了让盒子阴影可见。

见小提琴

于 2013-05-22T11:55:23.880 回答
0

这是因为您正在使用~选择器。选择器~选择当前元素前面的元素，并且在您的第二个块中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 演示。

于 2013-05-22T11:57:22.697 回答