Изменение родительского div на другой фон при зависании отдельных дочерних div

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

Я предполагаю, что это невозможно с CSS.

<div id="buttonBox">
   <div id="schedBox">
     <a href="#">Schedule</a>
   </div>
   <div id="transBox">
     <a href="#">Transformation</a>
   </div>
   <div id="destBox">
     <a href="#">Destination</a>
   </div>
   <div id="inspirBox">
     <a href="#">Inspiration</a>
   </div>
</div>

В качестве альтернативы я мог бы иметь дочерние divs, у каждого из которых есть другой фон. Наведение одного дочернего div изменит все фоны дочерних div на отдельный цвет, но я не мог понять, как наведите указатель на второй div на предыдущий div.. только последующие братья и сестры.

Ответы

Ответ 1

В то время как фактический родительский селектор невозможен с помощью CSS, вы можете "взломать" его для своего случая, используя дополнительные элементы и позиционирование.

Вам нужно изменить фон, основываясь на том, какой элемент завис, - хорошо! Добавьте псевдоэлементы (или обычные элементы, если вам нужна поддержка IE) и поместите их над родителем, используя абсолютное позиционирование и положительный z-index:

#buttonBox {
    position: relative;
    z-index: 1;
}

#buttonBox > div:before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

Те позиционированные элементы должны иметь отрицательный z-index, поэтому они будут помещены под любой другой контент, но поверх фона родительского элемента.

Таким образом, вы можете добавить такие правила, как

#schedBox:hover:before  { background: lime;   }
#transBox:hover:before  { background: red;    }
#destBox:hover:before   { background: orange; }
#inspirBox:hover:before { background: yellow; }

И псевдо-фон родителя изменился бы на hover!

Единственное, что нужно знать, это не должно быть элементов с нестатической позицией между родительским элементом и элементами с ролью фона.

Вот живой пример в dabblet

Ответ 2

Да, это возможно. Попробуйте следующее:

#schedBox:hover, #buttonBox{
   background: red;
}

#schedBox:hover{
   background: green;
}

Ответ 3

К сожалению, в CSS нет родительских селекторов.

Вам нужно будет использовать javascript для достижения того, что вы хотите сделать.