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 と動作しない(動作する必要がある) JSFiddle です。最後の例の配置は気にしないでください。表示される最初の div にカーソルを合わせるだけで、リンク先の 2 番目の例では機能しないことがわかります。

これが期待どおりに機能しないのはなぜですか? つまり、唯一の違いは、クラス名と ID 名が変更されたことです。

4

3 に答える 3

2

#TLHOOKは兄弟ではない.Left(同じ要素である) ため、~このコンテキストではセレクターを使用できません。

あなたの作業例では#one、#twoと#threeは兄弟です。

一般的な兄弟コンビネータは、単純なセレクターの 2 つのシーケンスを区切る「チルダ」(U+007E, ~) 文字で構成されます。2 つのシーケンスで表される要素は、ドキュメント ツリー内で同じ親を共有し、最初のシーケンスで表される要素は、2 番目のシーケンスで表される要素の前 (必ずしもすぐではない) にあります。

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 {

また、.LeftSide float:left を指定したため、上記の修正後にボックス シャドウが機能しないこともわかりません。

だから私は float: right を .SideContainer に与え、ボックスの影を見えるようにするためだけにボックスの影を増やしました。

フィドルを見る

于 2013-05-22T11:55:23.880 に答える
0

これは、~セレクターを使用しているためです。セレクターは現在の~要素が先行する要素を選択し、2 番目のチャンクにはsection2 つの要素の間に があります。

<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 -->

これを修正するには、2 番目の を使用する必要があります~。

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

これにより、前のセクションの前の #BLHOOK が選択されます。それはかなりハッキーですが、うまくいきます！

JSFiddle デモ。

于 2013-05-22T11:57:22.697 に答える