Boxshadow теперь работает над: hover, но делает это в другом

Question

Я не могу заставить эти div отображать тень окна, когда я навешиваю над другим div. Я получил его в Jsfiddle, но когда он применяется к этим div, это не работает, и я не знаю, почему. Я включил как исходный (рабочий) Jsfiddle, так и эту (нерабочую версию) для сравнения. Я не понимаю, почему он не работает, поскольку разница в том, что у них разные имена классов и идентификаторов.

Ниже мой текущий код:

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, который вы видите, и вы увидите, что он не работает во втором примере, к которому я привязан.

Почему это не работает должным образом? Я имею в виду, что единственное отличие в том, что имена классов и имена имен были изменены, и, похоже, я бы подумал, что это сработает?

Answer 1

#TLHOOK не является родственным братом .Left (это тот же элемент), поэтому селектор ~ не может использоваться в этом контексте.

В вашем рабочем примере #one, #two и #three являются братьями и сестрами.

Общее родственный комбинатор выполнен из «тильды» (U + 007E, ~) символа, который разделяет две последовательности простых селекторов. Элементы , представленные двумя последовательностями, имеют один и тот же родительский элемент в дереве документов , а элемент, представленный первой последовательностью , предшествует (не обязательно сразу) элементу, представленному вторым номером .

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

Answer 2

Вы получаете доступ к самому элементу, чем собрат в CSS

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

ИТ должно быть

.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 предыдущего параграфа. Это довольно хаки, но это трюк!

JSFiddle demo.