方框阴影不工作:悬停，但在其他一个

当我将鼠标悬停在另一个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名发生了变化，我以为它会起作用?

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

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

一般同胞组合子由"波浪"组成(U+007E， ~)分隔两个简单选择器序列的字符。的中表示的元素共享相同的父元素文档树和由第一个序列表示的元素表示的元素的前面(不一定立即)第二个。

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

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

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

IT应该是

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

同样，你也不会看到盒子阴影在上面的修复后工作，因为你给了。leftside float:left.

所以我把float: right赋给。sidecontainer，并增加了方框阴影，只是为了使方框阴影可见。

看到小提琴

这是因为您使用的是~选择器。~选择器选择当前元素前面的元素，在第二个块中，两个元素之间有一个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。这是相当粗糙的，但它的伎俩!

JSFiddle演示/strong>。

相关内容

最新更新

热门标签：